HTML+CSS动画波纹效果和奔跑的大熊

﹏ヽ暗。殇╰゛Y 2022-12-04 07:44 179阅读 0赞

### 动画概念 ###

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画。常用来实现复杂的动画效果。

相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

### 动画的使用 ###

**定义动画：使用@keyframes定义动画**

**语法：**

@keyframes 动画名称{
        %0{
    
        }
        100%{
    
        }
    
    }

**动画序列**

*  0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
 *  在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
 *  动画使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数
 *  用百分比来规定动画发生的时间，或用关键词from和to，等同于0%和100%

** 使用动画**

div{
        animation-name：动画名称
        animation-duration：持续时间
    }

**动画的属性**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@keyframes</td> 
   <td>定义动画</td> 
  </tr> 
  <tr> 
   <td>animation</td> 
   <td>所有动画属性的简写属性，除了animation-play-state属性</td> 
  </tr> 
  <tr> 
   <td>animation-name</td> 
   <td> <p>定义@keyframes动画的名称，必填</p> </td> 
  </tr> 
  <tr> 
   <td>animation-duration</td> 
   <td>规定动画完成一个周期所花费的秒或毫秒，默认0，必填</td> 
  </tr> 
  <tr> 
   <td>animation-timing-function</td> 
   <td>规定动画的速度曲线，默认ease</td> 
  </tr> 
  <tr> 
   <td>animation-delay</td> 
   <td>规定动画何时开始，默认0立刻开始</td> 
  </tr> 
  <tr> 
   <td>animation-iteration-count</td> 
   <td>规定动画的播放次数，默认是1，还有infinite无限循环</td> 
  </tr> 
  <tr> 
   <td>animation-direction</td> 
   <td>规定动画是否在下一个周期逆向播放，默认是normal，alternate逆向播放</td> 
  </tr> 
  <tr> 
   <td>animation-play-state</td> 
   <td>规定动画是否在运行或暂停，默认是running还有pause</td> 
  </tr> 
  <tr> 
   <td>animation-fill-mode</td> 
   <td>规定动画结束后状态，保持forwards，回到起始backwards</td> 
  </tr> 
 </tbody> 
</table>

**动画简写属性**

**animation:** 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画开始或结束状态

*  简写属性里不包含animation-play-state
 *  暂停动画animation-play-state经常和鼠标经过等其他配合使用
 *  想要动画走回来，而不是直接跳回来，animation-direction：alternate
 *  盒子动画结束后，停在结束位置：animation-fill-mode：forwards

### 动画案例 ###

**案例1：** 实现波纹效果

<html>
    
    <head>
        <title>demo3</title>
        <style>
            body {
                background-color: #333;
            }
    
            .map {
                position: relative
            }
    
            .city {
                position: absolute;
                top: 300px;
                right: 50%
            }
    
            .dotted {
                width: 8px;
                height: 8px;
                background-color: #0099ff;
                border-radius: 50%;
            }
    
            .city div[class^='pulse'] {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 8px;
                height: 8px;
                box-shadow: 0 0 12px #009dfd;
                border-radius: 50%;
                animation-name: pulse;
                animation-duration: 1.2s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
    
            @keyframes pulse {
                0% {}
    
                70% {
                    width: 40px;
                    height: 40px;
                    opacity: 1;
                }
    
                100% {
                    width: 70px;
                    height: 70px;
                    opacity: 0;
                }
            }
    
            .city div.pulse2 {
                animation-delay: 0.4s;
            }
    
            .city div.pulse3 {
                animation-delay: 0.8s;
            }
        </style>
    </head>
    
    <body>
        <div class="map">
            <div class="city">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
        </div>
    </body>
    
    </html>

**案例2：**实现奔跑的大熊

基本思路：如下图所示一张图片上有8个不同状态的大熊，每个大熊的宽度大约是160px，我们定义一个宽为160px的div盒子，然后把这个图片作为盒子的背景图片，然后通过动画控制背景图片的位置，每次向左移动一个大熊的的位置，所以8个大熊（背景图片的总宽度）分为8次移动结束。这里需要制定animation-timing-function的属性为steps(8)，这样连续起来就像大熊在奔跑一样。然后我们再定义一组盒子移动的动画。让盒子从左边移动到右边。多组动画用逗号分隔。

![20200907235119166.png][]

<html>
    
    <head>
        <title>demo3</title>
        <style>
            body {
                background-color: #000;
            }
    
            .bear {
                position: absolute;
                width: 160px;
                height: 80px;
                top: 50%;
                transform: translateY(-50%);
                background: url(./bear-25676f9.png) no-repeat;
                animation: bear 1s steps(8) infinite, move 5s linear infinite;
            }
    
    
            @keyframes bear {
                0% {
                    background-position: 0 0;
                }
    
                100% {
                    background-position: -1280px 0;
                }
            }
    
            @keyframes move {
                0% {
                    left: 0;
                }
    
                100% {
                    left: 100%
                }
            }
    
            div:nth-child(2) {
                animation-delay: 1s;
                animation-duration: 2.5s;
            }
            
            div:nth-child(3){
                animation-delay: 2s;
                animation-duration: 2s;
            }
    
            div:nth-child(4){
                animation-delay: 3s;
                animation-duration: 1s;
            }
    
            div:last-child {
                animation-delay: 4s;
            }
        </style>
    </head>
    
    <body>
        <div class="bear"></div>
        <div class="bear"></div>
        <div class="bear"></div>
        <div class="bear"></div>
        <div class="bear"></div>
    </body>
    
    </html>

[20200907235119166.png]: /images/20221123/715bad85cbca4c7395c506ca505f1606.png