<div class="box" :style="{
'--card-ul-width-start':-30+'px',
'--card-ul-width-middle1':-cap.length*30+'px',
'--card-ul-width-middle2':-cap.length*60+'px',
'--card-ul-width-end':-cap.length*90+'px'
}">
<ul :style="{'-webkit-animation':cap.length*8+ 's move infinite linear;'}">
<li></li>
</ul>
</div>
data(){
cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')
}
@keyframes move {
0%{
transform:translateX(var(--card-ul-width-start))
}
30%{
transform:translateX(var(--card-ul-width-middle1))
}
70%{
transform:translateX(var(--card-ul-width-middle2))
}
100%{
transform:translateX(var(--card-ul-width-end))
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 12: 净零小图的个数 */
animation:
move 1s steps(12) infinite, /*单独这行，注意把逗号去掉，不然跑不起来*/
/* run 1s forwards */
;
}
@keyframes move {
from {
background-position: 0 0;
}
to {
/* 1680: 精灵图的宽度 */
background-position: -1680px 0;
}
}
/* 定义一个盒子移动的动画 800px */
@keyframes run {
/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
from {
transform: translateX(0);
}
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
标签：css3,translateX,轮播,--,transform,width,animation,var,card From： https://www.cnblogs.com/lyk562564104/p/16992687.html