css3动画属性&案例

好喜欢前端

已于 2022-12-01 18:36:20 修改

阅读量240

点赞数

CC 4.0 BY-SA版权

文章标签： css3 前端 css

于 2022-10-16 22:20:26 首次发布

本文链接：https://blog.csdn.net/qq_53983648/article/details/127354089

动画

动画和过渡的区别

动画和过渡类似，都是可以实现一些动态的效果；
不同的是过渡需要在某个事件来触发，而动画可以自动触发动态效果；
设置动画效果，必须先要设置一个关键帧（@keyframes），关键帧设置了动画执行每一个步骤。

动画的概念

在IE9及以下不兼容

动画是使元素从一种样式逐渐变化为另一种样式的效果。我们还可以设置不同的样式、时间和次数等。

使用 @keyframes 创建动画，此外还需要把相应的动画名绑定到一个选择器中，否则创建的动画是不会有任何效果的。

语法：

创建动画：@keyframes 动画名称 { }
使用动画：animation: 动画名称时长
上面的动画名称和持续时间必须定义。如果省略时间，动画将无法运行，因为默认值是0。

我们可以使用关键词 from 和 to、百分比来规定动画的变化样式。

/* 2.使用动画 */
p {
  animation: 动画名称 1s;
}

/* 1.创建动画 */
/* 关键词 from 和 to */
@keyframes 动画名称{
  /* 动画的起始位置 */
  from {
		/* 操作 */
  }
  /* 动画的结束位置 */
  to {
		/* 操作 */
  }
}

/* 百分比 */
@keyframes 动画名称{
  /* 动画的起始位置 */
  0% {
  	/* 操作 */
  }
  /* 动画的结束位置 */
  100% {
  	/* 操作 */  
 	}
}

动画的连写形式

当然上面的动画是简写形式的，我们也可以使用连写形式。

下面将拆分讲解单个设计动画的属性。

动画名称
animation-name 设置动画的名称。

比如：animation-name: test;

动画执行时间
animation-duration 设置动画的执行时间，也就是动画完成一个周期所花费的时间。

比如：animation-duration: 4s;

动画的速度曲线
animation-timing-function 设置动画以什么方式来完成一个周期。

可以设置的值：

ease：先加速在减速，默认
ease-in：加速
ease-out：减速
ease-in-out：以低速开始和结束
linear：匀速
steps(int,start|end)：间隔数量 (步长)
int：间隔数，是一个正整数（大于 0）
start：可选，动画的第一帧会被立即执行，直接从第二帧开始，然后以第一帧结束
end：可选，从第一帧开始到正常结束，默认
cubic-bezier(n,n,n,n)：设置自己想要的值，值可以是从 0 到 1 的数值

动画的延时
animation-delay 设置动画什么时候开始，也就是延迟时间是多久。 (默认是0)

比如：animation-delay: 2s;

动画运行的方向

animation-direction 设置动画运行的方向。

normal ：正常播放动画，默认
reverse：逆序播放动画
alternate：奇数次正常播放动画，偶数次逆序播放动画
alternate-reverse：奇数次逆序播放动画，偶数次正常播放动画
动画执行的次数
animation-iteration-count 设置动画执行的次数。（默认是1）

数值：具体的整数
infinite：无限循环
比如：animation-iteration-count: 1;

动画的执行状态
animation-play-state 设置动画的执行状态

running：执行，默认
paused：暂停
动画执行完毕时的状态
animation-fill-mode 设置动画执行完毕时的状态

none：回到初始位置，默认
forwards：停止结束的位置（第一帧状态）
backwards：动画延时等待时，元素就会处于开始位置（最后一帧状态）
both：结合了forwards 和 backwards
简写
animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态（部分先后，除了时间）

animation: test 2s 2 1s alternate;

圆角(顺时针设置)：
border-radius：value；
阴影：

文字阴影：text-shadow：水平-length 垂直-length 模糊度-length 外沿值-length 颜色-color
盒子阴影：box-shadow
渐变：
线性渐变：background（-image）：linear-gradient（to 方向，颜色）；
径向渐变
backgroudn：radial-gradient

以上是css3的全部知识点，可以利用这些知识点做一些有趣的小案例！

小风车案例

html代码

   <div class="box">
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="center"></div>
    </div>

css代码

        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            animation: rotate 2s linear infinite;
        }
        
        .center {
            position: absolute;
            top: 140px;
            left: 140px;
            width: 20px;
            height: 20px;
            background-color: rgb(87, 87, 87);
        }
        
        .box .hezi {
            display: flex;
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
        
        .box .hezi:nth-child(1) span {
            width: 150px;
            height: 150px;
            margin-top: 75px;
            border-radius: 50% 50% 0 0;
            background: -webkit-linear-gradient( left top, rgb(90, 211, 90), #fff);
        }
        
        .box .hezi:nth-child(2) span {
            width: 150px;
            height: 150px;
            margin-left: -75px;
            border-radius: 0 50% 50% 0;
            background: -webkit-linear-gradient( left top, rgb(233, 79, 194), #fff);
        }
        
        .box .hezi:nth-child(3) span {
            width: 150px;
            height: 150px;
            margin-left: -75px;
            border-radius: 0 50% 50% 0;
            background: -webkit-linear-gradient( left top, rgb(93, 210, 240), #fff);
        }
        
        .box .hezi:nth-child(3) {
            transform: rotate(180deg);
        }
        
        .box .hezi:nth-child(4) span {
            width: 150px;
            height: 150px;
            margin-top: -75px;
            border-radius: 0 0 50% 50%;
            background: -webkit-linear-gradient( right top, rgb(252, 201, 91), #fff);
        }
        
        @keyframes rotate {
            0% {}
            100% {
                transform: rotate(360deg);
            }
        }
    </style>

小风车案例代码：

<!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>Document</title>
    <style>
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            animation: rotate 2s linear infinite;
        }
        
        .center {
            position: absolute;
            top: 140px;
            left: 140px;
            width: 20px;
            height: 20px;
            background-color: rgb(87, 87, 87);
        }
        
        .box .hezi {
            display: flex;
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
        
        .box .hezi:nth-child(1) span {
            width: 150px;
            height: 150px;
            margin-top: 75px;
            border-radius: 50% 50% 0 0;
            background: -webkit-linear-gradient( left top, rgb(90, 211, 90), #fff);
        }
        
        .box .hezi:nth-child(2) span {
            width: 150px;
            height: 150px;
            margin-left: -75px;
            border-radius: 0 50% 50% 0;
            background: -webkit-linear-gradient( left top, rgb(233, 79, 194), #fff);
        }
        
        .box .hezi:nth-child(3) span {
            width: 150px;
            height: 150px;
            margin-left: -75px;
            border-radius: 0 50% 50% 0;
            background: -webkit-linear-gradient( left top, rgb(93, 210, 240), #fff);
        }
        
        .box .hezi:nth-child(3) {
            transform: rotate(180deg);
        }
        
        .box .hezi:nth-child(4) span {
            width: 150px;
            height: 150px;
            margin-top: -75px;
            border-radius: 0 0 50% 50%;
            background: -webkit-linear-gradient( right top, rgb(252, 201, 91), #fff);
        }
        
        @keyframes rotate {
            0% {}
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="hezi">
            <span></span>
        </div>
        <div class="center"></div>
    </div>

</body>
</html>