逐帧动画实现
逐幀動畫實現
- 1動畫素材（精靈圖）
- 2 steps實現逐幀動畫
- 3 為盒子添加移動動畫
1動畫素材（精靈圖）
bg.png
2 steps實現逐幀動畫
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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;}@keyframes move{from{background-position: 0 0;}to{/* 1680：精靈圖的寬度 */background-position: -1680px 0;}}</style> </head> <body><div class="box"></div></body> </html>3 為盒子添加移動動畫
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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 3s forwards;}@keyframes move{from{background-position: 0 0;}to{/* 1680：精靈圖的寬度 */background-position: -1680px 0;}}/* 定義一個盒子移動的動畫 */@keyframes run{from{transform: translateX(0);}to{transform: translateX(800px);}}</style> </head> <body><div class="box"></div></body> </html>總結
- 上一篇： Duilib学习笔记《05》— 消息响应
- 下一篇： 希沃白板5和html5,希沃白板5官方版