問題
圖片加文字的無縫滾動，在手機端的效果總體還行，但是圖片在手機某些瀏覽器會抖得膩害！
錯誤寫法
不能用left，margin-left,像這種寫法:
.donghua.active{
animation: scoll ease-in-out 1s infinite alternate;
-webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll {
from {
left: 0;
}
to {
left: -353px;
}
}
-webkit-@keyframes scoll {
from {
left: 0;
}
to {
left: -353px;
}
}
方法
里面的某個元素在手機端會抖動的膩害,改用二維的translate像這樣:
.donghua.active{
animation: scoll ease-in-out 1s infinite alternate;
-webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, -353px);
}
}
@-webkit-keyframes scoll {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, -353px);
}
}
chrome 瀏覽器性能分析
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40107.html
標籤：其他
上一篇：NVIDIA CUDA、AMD stream、C++ AMP、OpenCL等GPU計算框架各有什么特點？
下一篇：2020年北京國際人工智能展覽會