利用雪碧圖，完成兔子走路過渡/動畫效果

本文轉載自查看原文 2020-04-11 11:01 743 CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 
                像這種，利用雪碧圖制作的動畫效果叫做精靈動畫
             */
            .box1{
                height: 271px;
                width: 132px;
                background-image: url(img/bigtap-mitu-queue-big.png);
                /* margin: 50px auto; */
                /* 設置過渡效果  */
                transition: all 1s steps(4);
                
            }
            
            .box1:hover{
                background-position: -528px 0;
                margin-left: 100px;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1">
            
        </div>
        
    </body>
</html>

內容；

1.利用過渡（transition），一個切換兔子height: 271px; width: 132px; 對雪碧圖的水平偏移量設置過渡，走四步，就可以切換兔子走路效果。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             
 8             .box1{
 9                 height: 271px;
10                 width: 132px;
11                 background-image: url(img/bigtap-mitu-queue-big.png);
12                 margin: 50px auto;
13                 /* 應用動畫   */
14                 animation: walk 1s steps(4) infinite;
15                 
16                 
17                 
18             }
19             
20             @keyframes walk{
21                 from{
22                     background-position: 0 0;
23                 }
24                 to{
25                     background-position:-528px 0;
26                 }
27             }
28             
29             
30         </style>
31     </head>
32     <body>
33         
34         <div class="box1">
35             
36         </div>
37         
38     </body>
39 </html>

2.利用動畫（animation），亦可以實現兔子的走路效果。

3.transition，只能用於設置一次性的過渡效果，如果需要持續運行的動畫，必須要用到animation

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 利用css動畫和一個雪碧圖做一個動圖 vue利用transition過渡動畫實現輪播圖 css動畫效果之transition（動畫過渡效果屬性） CSS3常用屬性(邊框、背景、文本效果、2D轉換、3D轉換、過渡、有過渡效果大圖輪播、動畫) vue中的css 動畫過渡效果 echart 完成氣泡圖效果 css過渡動畫，鼠標移上去就變大（緩慢變大、過渡效果、放大的過程是過渡動畫的，這個過渡動畫是有時間控制的） react過渡動畫效果的實現,react-transition-group 12 react 基礎的 css 過渡動畫及動畫效果及使用 react-transition-group 實現動畫雪碧圖技術