<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