html5 - 如何用纯css实现弹幕效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 如何用纯css实现弹幕效果

PHPz 2017-04-17 13:50:33

[HTML讨论组]

711

@-webkit-keyframes barrage {
  from {
    left:100%;
    transform:translate3d(0,0,0);  
  }

  to {
    left:0;
    transform:translate3d(-100%,0,0);  
  }
}
@keyframes barrage {
  from {
    left:100%;
    transform:translate3d(0,0,0);    
  }

  to {
    left:0;
    transform:translate3d(-100%,0,0);
  }
}

想用纯css模拟弹幕效果，上面是初步的代码，结合定位做。但是问题是关键帧使用了left，性能不是很好。。求优化，求纯css更好的解决方案。

http://jiangshanmeta.github.i...

链接在上，请用手机模式打开，然后弹幕效果在屏幕下方

看渲染满屏都是绿的。。。。都懂的。。。。只想问css方案

好吧，我想明白了，再加一层p就行了

PHPz

学习是最好的投资！

全部回复(3)

大家讲道理2017-04-17 13:52:33 3楼

性能不好是怎么不好？效果不平滑还是其他意思？还有就是，你动画的启动是怎么设置的？时间多长？线性的（infinite）函数加速的？没有说清楚啊

赞 +0

添加回复

PHPz2017-04-17 13:52:33 2楼

.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);}
}

赞 +0

添加回复