css实现公告滚动
html部分:
div class="container">
<div class="li-box">
<ul>
<li>本站的url地址是www.warnerli.club</li>
<li>只有努力奋斗才会有美好的未来</li>
<li>每一天都是新的必须要好好珍惜。</li>
<li>当下的时间才是最宝贵的,下一秒都是虚幻</li>
<li>欢迎提供有益的建议和意见。</li>
</ul>
</div>
</div>
css部分:
<style>
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
display: inline-block;
background: #efefef;
padding: 10px;
border: 1px solid #ccc;
font-family: "Microsoft YaHei";
}
.container .li-box {
height: 28px;
overflow: hidden;
}
.container ul {
position: relative;
animation: moveUp 8s 0.6s infinite;
-webkit-animation: moveUp 8s 0.6s infinite;
}
@keyframes moveUp {
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
@-webkit-keyframes moveUp{
0% {
top: 0px;
}
18% {
top: 0px;
}
20% {
top: -28px;
}
38% {
top: -28px;
}
40% {
top: -56px;
}
58% {
top: -56px;
}
60% {
top: -84px;
}
78% {
top: -84px;
}
80% {
top: -112px;
}
98% {
top: -112px;
}
}
.container li {
line-height: 1.8;
color: #666;
}
</style>
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.190.160.144,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-realizes-announcement-scrolling.html
文章链接:https://www.ooize.com/css-realizes-announcement-scrolling.html
订阅
登录
0 评论