PHP技术论坛
标题:
纯CSS实现上下广告文字滚动效果
[打印本页]
作者:
admin
时间:
2017-8-30 17:07
标题:
纯CSS实现上下广告文字滚动效果
.wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}
p{margin:0;height: 30px;width: 100%}
.content p{
position: absolute;
}
@-webkit-keyframes anim1{
0% {top: 30px;opacity: 1}
50% {top: -30px;opacity: 1}
75% {top: -30px ;opacity: 0}
100%{top:30px;opacity: 0}
}
@-webkit-keyframes anim2{
0% {top: -30px;opacity: 0}
25% {top: 30px;opacity: 0}
50% {top: 30px;opacity: 1}
100%{top: -30px;opacity: 1}
}
.content p:nth-child(1){background-color: red;}
.content p:nth-child(2){background-color: yellow;}
.content p:nth-child(1){
-webkit-animation: anim1 3s linear infinite;
}
.content p:nth-child(2){
-webkit-animation: anim2 3s linear infinite;
}
复制代码
<div class="wrap">
<div class="content">
<p>第一行数据</p>
<p>第二行数据</p>
</div>
</div>
复制代码
欢迎光临 PHP技术论坛 (http://php.hh85.com/)
Powered by Discuz! X3.2