前端——css动画

最新推荐文章于 2024-09-29 21:43:16 发布

人生の三重奏

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量385

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_53256193/article/details/142621199

版权

一、动画

1.定义动画

@keyframes +自定义动画名字

0%-100% 就是动画的开始到结束帧数 ——from to

@keyframes mybox {

0% {

width: 600px;

}

20% {

width: 50px;

}

30% {

width: 300px;

}

100% {

width: 1000px;

}

}

或者

@keyframes mybox {

from {

width: 600px;

}

20% {

width: 50px;

}

30% {

width: 300px;

}

to {

width: 1000px;

}

}

2.调用动画

animation: name duration timing-function iteration-count;

1.整合

animation: mybox 30s;

2.分解属性

/* animation-name:动画的名称 */

animation-name: mybox;

/* animation-duration 动画所需要时间 */

animation-duration: 8s;

/* 动画运动速率和我们的过渡的运动速率取值是一样的 */

/* ease 缓慢开始，陡然加速，再逐渐减速至结束

ease—in 缓慢开始，再逐渐加速至结束，最终突然停止

ease—out 缓慢开始，再逐渐减速至结束

ease—i-out 缓慢开始，然后加速，再减速至结束*/

animation-timing-function: ease-in-out;

/* 动画延迟 */

animation-delay: 5s;

/* 规定的动画播放次数 infinite为无限次播放*/

animation-iteration-count: 2;

/* 当想保留动画完成后最后一帧的状态 */

/* animation-fill-mode: forwards; */

/* backwards在动画显示之前的状态，就跟我们的延迟播放的效果一样*/

/* animation-fill-mode: backwards; */

animation-fill-mode: both;

二、动画属性

1.transition

常见：

ease 缓慢开始，陡然加速，再逐渐减速至结束(默认）

ease—in 缓慢开始，再逐渐加速至结束，最终突然停止

ease—out 缓慢开始，再逐渐减速至结束

ease—i-out 缓慢开始，然后加速，再减速至结束

linear 匀速

.ease:hover {}表示实现鼠标交互效果

<!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>
        /* ease 缓慢开始，陡然加速，再逐渐减速至结束
            ease—in  缓慢开始，再逐渐加速至结束，最终突然停止
            ease—out  缓慢开始，再逐渐减速至结束
            ease—i-out  缓慢开始，然后加速，再减速至结束
            linear 匀速*/
        .ease {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: aqua;
            /* transition: width 2s ease; */
            /* 所有属性都过渡 */
            transition: all 2s linear;
            position: absolute;
            left: 0;
        }
        .ease-in {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: red;
            transition: width 2s ease-in;
        }
        .ease-out {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: orange;
            transition: width 2s ease-out;
        }
        .ease-in-out {
            width: 200px;
            height: 20px;
            margin-bottom: 20px;
            background-color: pink;
            transition: width 2s ease-in-out;
        }
        .ease:hover {
            /* width: 600px; */
            left: 200px;
        }
        .ease-in:hover {
            width: 600px;
        }
        .ease-out:hover {
            width: 600px;
        }
        .ease-in-out:hover {
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="ease"></div>
    <div class="ease-in"></div>
    <div class="ease-out"></div>
    <div class="ease-in-out"></div>
</html>

2.transform

1.移动——translate

.box {

width: 80px;

height: 80px;

background-color: pink;

/* 黑一个过渡，方便观察 */

transition: 3s;

/* translate 移动 */

/* translateX 沿着X移动 */

/* transform: translateX(300px); */

/* translateY 沿着Y移动 */

}

.box:hover {

/* translate 两个值斜对角移动 */

/* 只有一个值的时候是以X轴 */

transform: translate(300px,300px);

/* translateX 沿着X移动 */

/* transform: translateX(300px); */

/* translateY 沿着Y移动 */

}

2.旋转——rotate

.box {

width: 80px;

height: 80px;

background-color: pink;

/* 黑一个过渡，方便观察 */

transition: 3s;

/* 将盒子移动到浏览器中间 */

margin: 50px auto;

/* translate 移动 */

/* translateX 沿着X移动 */

/* transform: translateX(300px); */

/* translateY 沿着Y移动 */

}

/* 旋转 */

.box:hover {

/* 当写代码时要角度的时候角度单位是deg */

/* transform: rotate(45deg); */

/* 正值顺时针，负值逆时针 */

transform: rotate(-45deg);

/* transform: rotateX(45deg); */

}

3.旋转中心——transform-origin

.box {

width: 150px;

height: 150px;

background-color: skyblue;

/* 将盒子移动到浏览器中间 */

margin: 300px auto;

transform: rotate(45deg);

/* 旋转中心我们可以理解为变化原点规定写在盒子属性中，而非交互效果中*/

/* transform-origin: -100% -100%; */

/* 或者 */

transform-origin: top left;

}

4.缩放——scale

.box:hover {

/* 缩放会依据盒子的宽高来进行缩放 */

/* 1，1 原来的宽高 */

/* 当你写一个值的时候同时放大你的宽高 */

/* 当值为负数，则会反向缩放 */

/* transform: scale(2,2); */

/* transform: scale(-2); */

/* 缩小是0-1 */

transform: scale(-0.5);

}

5.倾斜——skew

/* 倾斜 */

transform: skew(30deg);

transform: skew(30deg,10deg);

6.3d模式呈现

transform-style: preserve-3d;

注意给到父元素

<!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 {
            /* perspective 视距 */
            /* 设置人和物体的距离——视距，规定要给到父元素 */
            perspective: 3000px;
            /* transform-style: preserve-3d; */
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 将盒子移动到浏览器中间 */
            margin: 100px auto;
           transition: 3s;
           /* 3d的呈现 规定给到父元素 */
           transform-style: preserve-3d;

        }
        .son {
            width: 300px;
            height: 300px;
            background-color: red;
            /* 将盒子移动到浏览器中间 */
            margin: 100px auto;
           transition: 3s;

        }
        .box:hover {
            transform: rotateY(45deg);
        }
        .son:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </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>
        body {
            /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */
            width: 100vw;
            height: 100vh;
            background-color:black;
            display:flex;
            justify-content: center;
            align-items: center;
        }

        main {
            width: 400px;
            height: 400px;
            border: solid 1px white;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: orangered;
            animation-name: hd,hd1,hd2;
            animation-duration: 4s,3s,4s;
        }
        @keyframes hd {
           25% {
            transform: translateX(300px);
           }
           50% {
            transform: translate(300px,300px);
           }
           75% {
            transform: translateY(300px);
           }
        }
        @keyframes hd1 {
           25% {
            background-color: orangered;
           }
           50% {
           background-color: blue;
           }
           75% {
            background-color: blueviolet;
           }
        }
        @keyframes hd2 {
            from,to {
                background-color: gray;
            }
           25% {
            border-radius: 50%;
           }
           50% {
            border-radius: 0%;
           }
           75% {
            border-radius: 50%;
           }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</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;
        }
        body {
            /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */
            background-color: #2c3e50;
        }

        main {
            width: 100vw;
            height: 100vh;
            background-color:#34495e;
            transform: scale(0);
            animation-name: hd,hd1,hd2;
            animation-duration: 2s,4s,1s;
            animation-fill-mode: forwards;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        main::after {
            content: 'houdunren.com';
            font-size: 2em;
            color: white;
            opacity: 0;
            animation-name: opacity;
            animation-duration: 2s;
            animation-delay: 4s;
            animation-fill-mode: forwards;

        }
        @keyframes opacity {
            to {
                opacity: .8;
            }
            
        }
        @keyframes hd {
           25% {
            transform: scale(0.5);
           }
           50% {
            transform: scale(1) rotate(360deg);
           }
           75% {
            transform: scale(0.5);
           }
           to {
            transform: scale(0);
           }
        }
        @keyframes hd1 {
           25% {
            background-color: orangered;
           }
           50% {
           background-color: blue;
           }
           75% {
            background-color: blueviolet;
           }
           to {
            background-color: greenyellow;
           }
        }
        @keyframes hd2 {
           25% {
            border-radius: 50%;
           }
           50% {
            border-radius: 0%;
           }
           75% {
            border-radius: 50%;
           }
           /* to {
            border-radius: 0%;
           } */
        }
        section {
            width: 100vw;
            height: 100vh;
            background-color:red;
        }
    </style>
</head>
<body>
    <main></main>
</body>
</html>