1、設計給過來的素材是一張一張的圖片,為了防止丟幀,就在
www.toptal.com/developers/… 這裡生成了一張精靈圖。
幀動畫可以選擇js/css3實現,不過css3效能會更好
2、程式碼如下
<header>
<h1 class="top-title"></h1>
<div class="sprite1-wp">
<div class="sprite1"></div>
</div>
</header>
複製程式碼
.sprite1-wp{
width:remit(240);
height:remit(240);
overflow: hidden;
position: absolute;
bottom: remit(240);
left: remit(156);
}
.sprite1{
width:remit(3600);
height:remit(240);
will-change: transform;
background-image: url('../images/sprites1.png');
background-size: remit(3600 240);
animation: frame1 1s steps(1) both infinite;
}
@keyframes frame1 {
0% {transform: translate3d(remit(-10),0,0);}
7% {transform: translate3d(remit(-250),0,0);}
14% {transform: translate3d(remit(-490),0,0);}
21% {transform: translate3d(remit(-730),0,0);}
28% {transform: translate3d(remit(-970),0,0);}
35% {transform: translate3d(remit(-1210),0,0);}
42% {transform: translate3d(remit(-1450),0,0);}
49% {transform: translate3d(remit(-1690),0,0);}
56% {transform: translate3d(remit(-1930),0,0);}
63% {transform: translate3d(remit(-2170),0,0);}
70% {transform: translate3d(remit(-2410),0,0);}
77% {transform: translate3d(remit(-2650),0,0);}
84% {transform: translate3d(remit(-2890),0,0);}
91% {transform: translate3d(remit(-3130),0,0);}
100% {transform: translate3d(remit(-3370),0,0);}
}
複製程式碼