如何用纯css实现弹幕效果
答案:2 悬赏:80 手机版
解决时间 2021-11-16 22:18
- 提问者网友：川水往事
- 2021-11-15 23:07
如何用纯css实现弹幕效果
最佳答案
- 五星知识达人网友：猎心人
- 2021-11-15 23:23
.icon-wh,.icon-wh2{
position:absolute;
right:0;
top:0;
width:102px;
height: 102px;
background:#f60;
-webkit-animation:translateX 10s ease-out infinite;
animation:translateX 10s ease-out infinite;
}
.icon-wh2{
top: 100px;
width:62px;
height: 164px;
-webkit-animation:translateX 5s ease-out infinite;
animation:translateX 5s ease-out infinite;
}
@-webkit-keyframes translateX{
0%{ -webkit-transform: translate3d(0,0, 0);}
100%{-webkit-transform: translate3d(-1920px,100px,0);}
}
@keyframes translateX{
0%{ transform: translate3d(0, 0, 0);}
100%{transform: translate3d(-1920px,100px,0);}
}
position:absolute;
right:0;
top:0;
width:102px;
height: 102px;
background:#f60;
-webkit-animation:translateX 10s ease-out infinite;
animation:translateX 10s ease-out infinite;
}
.icon-wh2{
top: 100px;
width:62px;
height: 164px;
-webkit-animation:translateX 5s ease-out infinite;
animation:translateX 5s ease-out infinite;
}
@-webkit-keyframes translateX{
0%{ -webkit-transform: translate3d(0,0, 0);}
100%{-webkit-transform: translate3d(-1920px,100px,0);}
}
@keyframes translateX{
0%{ transform: translate3d(0, 0, 0);}
100%{transform: translate3d(-1920px,100px,0);}
}
全部回答
- 1楼网友：毛毛
- 2021-11-15 23:41
纯css实现不了加JavaScript才可以
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯