css3动画

miss-ddly

已于 2022-11-06 18:01:46 修改

阅读量188

点赞数 1

文章标签： css3 css 动画

于 2022-11-06 17:57:29 首次发布

本文链接：https://blog.csdn.net/m0_69759037/article/details/127718510

版权

案例1：实现加载动画效果。

<!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-sizing: border-box;
         }
         section{
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: black;
            height: 100vh;
            /* 添加动画 ：旋转360deg 10s 状态 */
            animation: ma 10s linear infinite;
         }
         /* hue-rotate：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 */
         @keyframes ma{
            0%{
                filter: hue-rotate(0deg);
            }
            100%{
                filter: hue-rotate(360deg);
            }
         }
         .load{
            position: relative;
            width: 100px;
            height: 100px;
            margin: 100px auto;
         }
         .load span{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(calc(20deg * var(--i)));
         }
         .load span::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            box-shadow: 0 0 10px red,
            0 0 20px red,
            0 0 30px red,
            0 0 40px red,
            0 0 50px red,
            0 0 60px red;
            animation:  la 2s linear infinite;
            animation-delay: calc(0.1s*var(--i));
         }

         @keyframes la{
            0%{
                transform: scale(1);
            }
            70%,80%{
                transform: scale(0);
            }
         }
    </style>
</head>
<body>
    <section>
        <div class="load">
            <span style="--i:1;"></span>
            <span style="--i:2;"></span>
            <span style="--i:3;"></span>
            <span style="--i:4;"></span>
            <span style="--i:5;"></span>
            <span style="--i:6;"></span>
            <span style="--i:7;"></span>
            <span style="--i:8;"></span>
            <span style="--i:9;"></span>
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>
    </section>
</body>
</html>

案例2：实现泡泡弹跳效果。

1.创建泡泡和阴影。

<div class="papa"></div>
<div class="shadow"></div>

2.泡泡颜色和动画。

.papa{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* 阴影 */
    box-shadow: inset 0 0 20px #fff,
        inset 20px 0 46px #e9f0f5,
        inset 100px 0 60px #f5c7e8,
        inset -10px -60px 100px #e8e6d2,
        inset 0 40px 140px #f4f2df,
        0 0 90px #fff;
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
    animation: paopao 4s ease-in-out infinite;
}
@keyframes paopao {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-80px);
    }
}

3.阴影颜色和动画

.shadow{
    background-color: rgba(248, 242, 242, 0.15);
    width: 150px;
    height: 40px;
    border-radius: 50%;
    /* 绝对定位 */
    position: absolute;
    left: 50%;
    bottom: -100px;
    /* 一点点模糊效果 */
    filter: blur(1px);
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
    animation: shadow 4s ease-in-out infinite;
}
@keyframes shadow {
    0%,100%{
        transform: scale(0.5);
    }
    50%{
        transform: scale(1);
    }
}