序列幀動畫，今天偶然發現的很有意思的動畫
阿新 • • 發佈：2019-02-17
@https://www.bilibili.com/（圖片出處）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .frame{ width: 80px; height:80px; background-image: url(anim-fav.png); background-position: 0 center; background-repeat: no-repeat; animation:key-ani 14s steps(14); } .frame:hover{ background-position-x:-1120px; animation:key-ani_out 1s steps(14) infinite; } @keyframes key-ani { from{ background-position-x: 0; } to{ background-position-x: -1120px; } } @keyframes key-ani_out { from{ background-position-x: -1120px; } to{ background-position-x: 0; } } </style> </head> <body> <div class="frame"></div> </body> </html>
