前端学习笔记之CSS3动画（四）

最新推荐文章于 2024-04-03 04:31:56 发布

FrebEaton

最新推荐文章于 2024-04-03 04:31:56 发布

阅读量165

点赞数

分类专栏：前端学习笔记文章标签： javascript css html html5

本文链接：https://blog.csdn.net/FrebEaton/article/details/118341893

版权

前端学习笔记专栏收录该内容

14 篇文章 2 订阅

订阅专栏

CSS3动画

过渡

过渡的基本使用

transition过渡

transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”

在这里插入图片描述

过渡从IE10开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过渡
优点：动画更细腻，内存开销小

transition属性基本使用

transition属性有4个要素

在这里插入图片描述

过渡要定义在元素的开始状态上，而不是结束状态上

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius、opacity
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都能被过渡
如果要所有属性都参与过渡，可以写all
```
transition:all 1s linear 0s;
```

过渡的四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: width 5s linear 0s;
            margin-bottom: 10px;
        }

        .box1:hover {
            width: 800px;
        }

        .box2 {
            margin-bottom: 10px;
        }

        .box2 p {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: left 1s linear 0s;
            left: 0;
        }

        .box2:hover p {
            left: 1000px;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: background-color 1s linear 0s;
            margin-bottom: 10px;
        }

        .box3:hover {
            background-color: green;
        }

        .box4 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            border-radius: 0;
            transition: border-radius 1s linear 0s;
        }

        .box4:hover {
            border-radius: 50%;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 10px;
            transition: transform 1s linear 0s;
        }

        .box5:hover {
            transform: scale(1.2) rotate(360deg);
        }

        .box6 {
            perspective: 300px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin-bottom: 10px;
        }

        .box6 p {
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: transform 1s linear 0s;
        }

        .box6:hover p {
            transform: rotateX(360deg) rotateY(360deg);
        }

        .box7 {
            width: 200px;
            height: 200px;
            background-color: orange;
            border-radius: 0;
            transition: all 1s linear 0s;
        }
        .box7:hover {
            width: 400px;
            height: 160px;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">
        <p></p>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6">
        <p></p>
    </div>
    <div class="box7"></div>
</body>

</html>

过渡的缓动效果

缓动参数

transition的第三个参数就是缓动参数，也是变化速度曲线
```
transition:width 1s linear 0s;
				  变化速度曲线
```
常用缓动参数
- ease
- linear
- ease-in/out/in-out

在这里插入图片描述

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数。

transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            border: 1px solid #000;
        }
        .box p {
            width: 60px;
            height: 60px;
            background-color: orange;
            margin-bottom: 10px;
            position: relative;
            left: 0;
            transition: left 5s linear 0s;
        }
        .box p:nth-child(2) {
            transition-timing-function: ease;
        }
        .box p:nth-child(3) {
            transition-timing-function: ease-in;
        }
        .box p:nth-child(4) {
            transition-timing-function: ease-out;
        }
        .box p:nth-child(5) {
            transition-timing-function: ease-in-out;
        }
        .box p:nth-child(6) {
            transition-timing-function: cubic-bezier(.29,-0.98,.5,1.76);
        }

        .box:hover p {
            left: 1000px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

过渡效果实战

实战效果1

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            overflow: hidden;
            margin: 40px auto;
        }

        .box ul {
            list-style: none;
        }

        .box ul li {
            float: left;
            width: 380px;
            height: 210px;
            margin-right: 20px;
            /* 子绝父相 */
            position: relative;
        }

        .box ul li img {
            width: 380px;
            height: 210px;
        }

        .box ul li .info {
            position: absolute;
            width: 370px;
            height: 30px;
            line-height: 30px;
            color: white;
            bottom: 0;
            padding-left: 10px;
            background-color: rgba(0, 0, 0, .5);
            /* 透明度设置为0，不是背景的透明度，而是整体的透明度 */
            opacity: 0;
            /* 过渡 */
            transition: opacity 1s ease 0s;
        }

        /* 当li被触碰的时候，内部的info盒子就要把透明度变为1 */
        .box ul li:hover .info {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="images/0.jpg" alt="">
                <div class="info">北京的故宫</div>
            </li>
            <li>
                <img src="images/1.jpg" alt="">
                <div class="info">鸟巢国家体育场</div>
            </li>
            <li>
                <img src="images/2.jpg" alt="">
                <div class="info">十七孔桥</div>
            </li>
        </ul>
    </div>
</body>

</html>

实战效果2

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 508px;
            height: 107px;
            margin: 40px auto;
        }

        .box ul {
            list-style: none;
        }

        .box ul li {
            float: left;
            width: 107px;
            height: 107px;
            margin-right: 20px;
            /* 子绝父相 */
            position: relative;
        }

        .box ul li::before {
            content: '';
            display: block;
            width: 107px;
            height: 107px;
            transform: rotate(0);
            transition: transform 1s ease 0s;
        }

        .box ul li:nth-child(1)::before {
            background-image: url(images/a_1.png);
        }

        .box ul li:nth-child(2)::before {
            background-image: url(images/a_2.png);
        }

        .box ul li:nth-child(3)::before {
            background-image: url(images/a_3.png);
        }

        .box ul li:nth-child(4)::before {
            background-image: url(images/a_4.png);
        }

        .box ul li img {
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -30px;
            transition: transform .5s ease 0s;
        }

        /* 背景圆环旋转一周 */
        .box ul li:hover::before {
            transform: rotate(360deg);
        }

        /* 中心图标放大1.2倍 */
        .box ul li:hover img {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="images/icon1.svg" alt="">
            </li>
            <li>
                <img src="images/icon2.svg" alt="">
            </li>
            <li>
                <img src="images/icon3.svg" alt="">
            </li>
            <li>
                <img src="images/icon4.svg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            perspective: 500px; 
            position: relative;
        }

        .box img {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 50%;
        }

        .box img.dog {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            transition: transform 1s ease 0s;
        }

        .box:hover img.dog {
            transform: rotateY(-180deg);
        }

        .no2 img.dog {
            transform-origin: 100% 100%;
        }

        .no2:hover img.dog {
            transform: rotateY(180deg);
        }

        .no3 img.dog {
            transform-origin: 0 0;
        }

        .no3:hover img.dog {
            transform: rotateX(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>

    <div class="box no2">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>

    <div class="box no3">
        <img class="cat" src="images/cat.jpg" alt="">
        <img class="dog" src="images/dog.jpg" alt="">
    </div>
</body>

</html>

动画

动画的定义和调用

动画的定义

可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

在这里插入图片描述

动画的调用

定义动画之后，就可以使用animation属性调用动画

在这里插入图片描述

第五个参数就是动画的执行次数

在这里插入图片描述

如果想永远执行可以写infinite
```
animation: r 1s linear 0s infinite;
```
如果想让动画的第2、4、6……（偶数次）自动逆向执行，那么要加上alternate参数即可
```
animation: movelr 2s linear 0s infinite alternate;
```
如果想让动画停止在最后结束状态，那么要加上forwards
```
animation: changeToCircle 1s linear 0s forwards;
```

多关键帧动画

@keyframes changeColor {
    0% {
        background-color: red ;
    }
    20% {
        background-color: yellow ;
    }
    40% {
        background-color: blue ;
    }
    60% {
        background-color: green;
    }
    80% {
        background-color: purple ;
    }
    100% {
        background-color: orange;
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2XYRtB3X-1624964936543)( 在这里插入图片描述 ]

<!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>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            animation: r 1s linear 0s infinite;
        }

        @keyframes r {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation: movelr 2s linear 0s infinite alternate;
        }

        @keyframes movelr {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(1000px);
            }
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: green;
            animation: changeToCircle 1s linear 0s forwards;
        }

        @keyframes changeToCircle {
            from {
                border-radius: 0;
            }
            to {
                border-radius: 50%;
            }
        }

        .box4 {
            width: 200px;
            height: 200px;
            background-color: red;
            animation: changeColor 3s linear 0s alternate infinite;
        }

        @keyframes changeColor {
            0% {
                background-color: red;
            }
            20% {
                background-color: yellow;
            }
            40% {
                background-color: blue;
            }
            60% {
                background-color: green;
            }
            80% {
                background-color: purple;
            }
            100% {
                background-color: orange;
            }
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

动画效果实战

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .dengpao {
            position: absolute;
            top: 300px;
            left: 300px;
        }
        .guang {
            position: absolute;
            top: 235px;
            left: 222px;
            animation: ss 1s ease 0s infinite alternate;
        }

        @keyframes ss {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .huojian {
            position: absolute;
            top: 300px;
            left: 800px;
            animation: zd .4s linear 0s infinite alternate;
        }

        @keyframes zd {
            from {
                transform: translateX(-20px) translateY(-20px);
            }
            to {
                transform: translateX(20px) translateY(20px);
            }
        }

        .line1 {
            width: 2px;
            height: 166px;
            background-color: blue;
            position: absolute;
            top: 300px;
            left: 800px;
            transform: rotate(45deg);
            animation: yd 1s linear 0s infinite;
            opacity: 0;
        }
        .line2 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 340px;
            left: 850px;
            transform: rotate(45deg);
            animation: yd 1s linear .4s infinite;
            opacity: 0;
        }
        .line3 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 390px;
            left: 890px;
            transform: rotate(45deg);
            animation: yd 1s linear .68s infinite;
            opacity: 0;
        }
        .line4 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 390px;
            left: 920px;
            transform: rotate(45deg);
            animation: yd 1s linear .2s infinite;
            opacity: 0;
        }
        @keyframes yd {
            0% {
                transform: rotate(45deg) translateY(-300px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateY(300px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <img class="dengpao" src="images/dengpao.png" alt="">
    <img class="guang" src="images/guang.png" alt="">

    <img class="huojian" src="images/huojian.png" alt="">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
</body>
</html>