哈尔滨有网站的公司,怎么做网站收录,本溪网站建设,神华集团两学一做登陆网站前言
系统顶部展示一个横向滚动的消息通知#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
