奔跑的北极熊特效实现——动画animation练习

喜欢ヅ旅行 2023-02-28 01:26 25阅读 0赞

效果图：  
![在这里插入图片描述][2020071821432776.gif]

源代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { 
                background-color: #ddd;
            }
            
            span { 
                display: block;
                height: 100px;
                width: 300px;
                text-align: center;
                line-height: 100px;
                font-size: 48px;
                margin: 150px auto;
                border-bottom: 1px solid #00a4ff;
            }
            
            .bg1 { 
                position: absolute;
                bottom: 0px;
                height: 300px;
                width: 100%;
                background: url(image/bg1.png) repeat-x;
                animation: change_bg 5s linear infinite;
            }
            
            .bg2 { 
                position: absolute;
                bottom: 0px;
                height: 300px;
                width: 100%;
                z-index: 1;
                background: url(image/bg2.png) repeat-x;
                animation: change_bg 5s linear infinite;
            }
            
            .img { 
                position: fixed;
                bottom: 10px;
                height: 100px;
                width: 200px;
                z-index: 2;
                background: url(image/bear.png);
                animation: bear .4s steps(8) infinite, change_pos 2s forwards;
            }
            
            @keyframes bear { 
                0% { 
                    background-position: 0 0;
                }
                100% { 
                    background-position: -1600px 0;
                }
            }
            
            @keyframes change_pos { 
                0% { 
                    left: 0;
                }
                100% { 
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
            
            @keyframes change_bg { 
                0% { 
                    background-position: 0 0;
                }
                100% { 
                    background-position: -3840px 0;
                }
            }
        </style>
    </head>
    
    <body>
        <span>
            奔跑的北极熊
        </span>
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="img"></div>
    </body>
    
    </html>

所用资源图：  
bg1:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
bg2:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]  
bear：![在这里插入图片描述][20200718214448233.png]

[2020071821432776.gif]: /images/20230209/0657aa8665144ace8240640afde2cd09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20230209/b958458aa60a49acaf77d5500404d423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]: /images/20230209/6f9193c1086b4cadb601b92abbe9d564.png
[20200718214448233.png]: /images/20230209/9c6134d64213482f8513b7c18f6fe556.png