CSS3_03

最新推荐文章于 2024-10-31 06:29:51 发布

「已注销」

最新推荐文章于 2024-10-31 06:29:51 发布

阅读量53

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_44316317/article/details/120579590

版权

CSS3-03

一、动画(animation)

1、什么是动画

动画是使元素从一种样式逐渐变化为另一种样式的效果
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

2、动画实现步骤

定义动画
调用定义好的动画

二、定义动画

语法：

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    
    100% {
        width: 200px
    }
}

  
- 在 @keyframs 中规定某项 CSS 样式，就有创建当前样式逐渐改为新样式的动画效果
  
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  
- 可以用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%
  
- 动画序列和动画中的样式可以定义任意多个
  
    

#### 三、使用动画

- 语法：

  ```css
  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；

@keyframes 创建动画，需要把它绑定到一个html元素，否则动画不会有任何效果
必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0

代码演示

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    /* 调用动画 */
    animation-name: divRun;
    /* 持续时间 */
    animation-duration: 5s;
} 

/* 定义动画 */
@keyframes divRun {
    0% {
        left: 0;
        top: 0;
    }
    50% {
        background-color: green;
        left: 600px;
    }
    100% {
        left: 0px;
        top: 600px;
        background-color: blue;
    }
}

四、动画常见属性

属性	描述
@keyframes	定义动画
animation-name	动画名称（必须）
animation-duration	动画完成一个周期所需时间，默认为0 （必须）
animation-timing-function	动画的速度曲线，默认是ease
animation-iteration-count	动画播放的次数，默认为1，还可设置为infinite（无限）
animation-direction	动画是否在下一周期逆向播放，默认为normal,逆播放为alternate
animation-fill-mode	动画结束后状态。保持结束状态为forwards, 保持起始状态为backwards，both为两者效果都有
animation-delay	动画延迟执行的时间，默认为0
animation-play-state	动画当前状态。默认为running，还可设置为paused
animation	所有动画的简写属性。除了amination-play-state

代码演示

div {
    width: 100px;
    height: 100px;
    background-color: green;
    /* 动画名称 */
    animation-name: move;
    /* 动画花费时长 */
    animation-duration: 2s;
    /* 动画速度曲线 */
    animation-timing-function: ease-in-out;
    /* 动画等待多长时间执行 */
    animation-delay: 2s;
    /* 规定动画播放次数 infinite: 无限循环 */
    animation-iteration-count: infinite;
    /* 是否逆行播放 */
    animation-direction: alternate;
    /* 动画结束之后的状态 */
    animation-fill-mode: forwards;
}

div:hover {
    /* 规定动画是否暂停或者播放 */
    animation-play-state: paused;
}

@keyframes move {
    0% {
        transform: translate(0px)
    }
    100% {
        transform: translate(500px, 0)
    }
}

1、动画速度曲线

可以通过谷歌浏览器来调节贝塞尔曲线的值

语法：

animation-timing-function: ease(默认) | linear | ease-in | ease-out | ease-in-out | steps()

值	描述
ease	动画低速开始，然后加快，在结束前变慢（默认）
linear	动画匀速
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低带开始和结束
steps()	动画以指定时间间隔步长执行

2、动画简写方式

语法：
```
animation: 动画名称 持续时间 运动曲线  播放次数 是否反方向 结束状态 延迟时间;
```
- 动画名称和持续时间必须要有
- 其它有默认值的属性如果不需要可以省去
- 简写属性里面不包含animation-paly-state
- 暂停动画: animation-paly-state: paused，经常和鼠标经过等配合使用
- 要想动画走回来，而不是直接调回来：animation-direction: alternate
- 要想动画结束后，停在结束位置：animation-fill-mode: forwards

五、奔跑的小熊

在这里插入图片描述

代码展示

<!-- html部分 -->

<div class="bg1"></div>
<div class="bg2"></div>
<div class="bear"></div>

/* css部分 */
 * {
     margin: 0;
     padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient( rgb(112, 104, 104), #fff, #ccc);
}

.bg1,
.bg2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    animation: changeBg 5s linear infinite;
}

.bg1 {
    background: url(image/bg1.png) repeat-x;
}

.bg2 {
    z-index: 1;
    background: url(image/bg2.png) repeat-x;
}

.bear {
    z-index: 2;
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 100px;
    background: url(image/bear.png) no-repeat;
    animation: run .6s steps(8) infinite, move 2s linear forwards;
}

@keyframes changeBg {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3840px 0;
    }
}

@keyframes run {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: -1600px 0;
    }
}

@keyframes move {
    0% {
        left: 0;
    }
    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

思考：跳动的心

思路：
- 通过旋转和移动得到心型图形
- 通过缩放动画实现跳动效果

思考：地图热点

思路：
- 通过多个动画延迟时间的不同达到扩散效果
  
  0% {
  left: 0;
  }
  100% {
  left: 50%;
  transform: translateX(-50%);
  }
  }


#### 思考：跳动的心

* 思路：
  * 通过旋转和移动得到心型图形
  * 通过缩放动画实现跳动效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/700b4b53193540cfa036918d3bb58558.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Ieq6Iul,size_14,color_FFFFFF,t_70,g_se,x_16#pic_center)


#### 思考：地图热点

* 思路：
  * 通过多个动画延迟时间的不同达到扩散效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/1a3ff811a12241ee8d39f4894eeb5ca4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Ieq6Iul,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)