替换marquee跑马灯方案之CSS动画

替换marquee跑马灯方案之CSS动画

前言在也页面开发中,常见滚动文本使用marquee实现HTML marquee 元素) 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

这是一段滚动文本而在现代浏览器规则里,marquee 则已被标明废弃

已废弃: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.既然如此,我们就得寻找新的解决方案,这里使用CSS动画来实现

样式表内容.marquee {

width: 450px;

line-height: 50px;

background-color: red;

color: white;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

}

.marquee p {

display: inline-block;

padding-left: 100%;

animation: marquee 15s linear infinite;

}

@keyframes marquee {

0% { transform: translate(0, 0); }

100% { transform: translate(-100%, 0); }

}页面上使用

这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字

相关推荐

揭秘公众号打赏机制:作者收益大揭秘
消委會26款網絡安全軟件評測
365bet滚球网站

消委會26款網絡安全軟件評測

📅 10-24 👁️ 5766
全面解析:易我数据恢复软件的强大功能与使用优势
诚如研究|从国际足联《知识产权指南6.0》看品牌营销的“姿势”