css3跑马灯效果
作者:
张Boy | 来源:发表于
2020-12-21 17:53 被阅读0次1. 效果图
marquee.gif
2 代码
<html>
<head>
<style>
.marquee-box {
width: 400px;
height: 60px;
background: red;
color: #FFF;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.marquee-span {
margin: 0 auto;
position: relative;
display: inline;
height: auto;
font-size: 20px;
top: 50%;
font-weight: bold;
animation: marqueeLeft 20s linear infinite;
}
@keyframes marqueeLeft {
from {
transform: translateX(0) translateY(-50%); /* 自身节点*/
left: 100%; /* 继承父节点，让文字从最右侧开始显示*/
}
to {
transform: translateX(-100%) translateY(-50%);
left: 0;
}
}
</style>
</head>
<body>
<div class='marquee-box'>
<div class='marquee-span'>据了解，疫情发生以来，国务院联防联控机制科研攻关组疫苗研发专班和有关方面以战时状态推进疫苗各方面工作，科研人员争分夺秒、奋力攻关。目前5条技术路线共15个疫苗进入临床试验。</div>
</div>
</body>
</html>
本文标题：css3跑马灯效果
本文链接：https://www.haomeiwen.com/subject/wwfdnktx.html
网友评论