我住主要运用动画效果来实现的
html
王永康<div class="box">
<div class="track">
<div class="child child-1">我是弹幕</div>
</div>
<div class="track">
<div class="child child-2">我是弹幕</div>
</div>
<div class="track">
<div class="child child-3">我是弹幕</div>
</div>
</div> CSS
.box{
width: 800px;
height: 400px;
background: rgba(0,0,0,0.1);
margin: 100px auto 0;
overflow: hidden;
}
.track{
height: 40px;
line-height: 40px;
border: 2px solid rgba(0,0,0,0.3);
margin-bottom: 5px;
}
.child{
width: 80px;
line-height: 20px;
margin-bottom: 10px;
text-shadow: 2px 2px 2px rgba(0,0,0,0.1)
}
.child-1{
color: brown;
text-shadow: 2px 2px 3px rgb(248, 81, 20);
transform: translateX(1000px);
animation: scrollTo linear 4s infinite;
}
.child-2{
color: rgb(127, 197, 35);
text-shadow: 2px 2px 3px rgb(173, 255, 80);
transform: translateX(1050px);
animation: scrollTo linear 7s infinite;
}
.child-3{
color: coral;
text-shadow: 2px 2px 3px coral;
transform: translateX(800px);
animation: scrollTo linear 5s infinite;
}
@keyframes scrollTo {
to{
transform: translateX(-100px);
}
} 效果图：
0
联系我
0条评论