平面设计素材库,淄博网站优化价格,陕西省门户网站建设政策,建设网站需要想好的问题前言
系统顶部展示一个横向滚动的消息通知#xff0c;就是消息内容从右往左一直滚动。
效果如下#xff1a; 代码
使用 templatediv classnotic-barimg :srcnotic classnotice-img /div classnoti…前言
系统顶部展示一个横向滚动的消息通知就是消息内容从右往左一直滚动。
效果如下 代码
使用 templatediv classnotic-barimg :srcnotic classnotice-img /div classnotice-bar-containerdiv classnotice-bar__wrapdivv-for(item, index) in list:keyindexclassnotice-bar__wrap_text{{ item }}/div/div/div/div
/templatescript setup langts
import notic from ../../public/notic.png;
const list [开发不易感谢理解,,感谢您的理解,,您的支持是我继续完善的动力,
];
/scriptstyle langscss scoped
.notic-bar {display: flex;background: #67c23a;margin: 5px;border-radius: 5px;padding: 2px 5px;
}
.notice-bar-container {display: flex;width: calc(100% - 30px);height: 20px;overflow: hidden;margin-left: 5px;
}
.notice-img {width: 20px;height: 20px;
}
.notice-bar__wrap {margin-left: 10px;display: flex;animation: move 20s linear infinite;line-height: 20px;color: #f5f6f7;.notice-bar__wrap_text {width: max-content;min-width: 100px;}
}
keyframes move {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}
}
/style
