利用css3 steps制作動(dòng)畫效果
-寫在前面---
今天在看阿里云網(wǎng)站的時(shí)候發(fā)現(xiàn)了一個(gè)很有趣的動(dòng)效呼盆，便自己試著做了一下。
這個(gè)動(dòng)效讓我想起了小時(shí)候的本子動(dòng)畫合愈，利用紙張的快速翻頁，實(shí)現(xiàn)每張紙上靜態(tài)圖片形成連貫的動(dòng)畫。
-進(jìn)入正題---
這個(gè)動(dòng)效借助css3的transform+step來實(shí)現(xiàn)适贸。
首先是一張有著動(dòng)效圖在每個(gè)幀下的圖片，這是阿里云摳下來的圖片（超長(zhǎng)圖涝桅，拼命下拉吧~）
lizi.jpg
接著就是上正式的代碼了
<body><div class="donghua"></div><style>.donghua{width: 75px;height: 75px;background-image: url(images/lizi.jpg);background-size: 75px;cursor: pointer;}.donghua:hover{animation: moving 1.5s steps(60);}@keyframes moving {from{background-position:0 0px;}to{background-position:0 -9000px ;}}</style></body>
靜態(tài)效果圖.png
