直播css小动画

最新推荐文章于 2023-11-01 18:58:10 发布

前端酱紫

最新推荐文章于 2023-11-01 18:58:10 发布

阅读量853

点赞数 1

分类专栏： css3 文章标签： css3 animation 动画

本文链接：https://blog.csdn.net/wuj1935/article/details/112449700

版权

css3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直播css小动画

今天写页面的时候 UI出了一个icon动画需求，我本以为这个是要ui出一个gif图的，结果她让我写个动画，本来向怼她的，但是转念一想我也没做过这样的动画，就试试呗！

大概就是这么个玩意儿：
在这里插入图片描述

上代码：


<!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 {
            width: 20px;
            height: 20px;
            background-color: #aaa;
            justify-content: space-between;
            display: flex;
        }

        .box {
            width: 4px;
            height:20px;
            background-color: #eee;
            border-radius: 4px;
        }


        .move1 {
            transform: scaleY(0.2);
            animation: mymove1 0.7s 0.1s infinite linear alternate;
        }

        .move2 {
            transform: scaleY(1);
            animation: mymove2 0.7s 0.4s infinite linear alternate;
        }

        .move3 {
            transform: scaleY(0.1);
            animation: mymove3 0.7s 0.4s infinite linear alternate;
        }

        @keyframes mymove1 {
            0% {
                transform: scaleY(0.2);
            }

            100% {
                transform: scaleY(1);
            }
        }

        @keyframes mymove2 {
            0% {
                transform: scaleY(1);
            }

            100% {
                transform: scaleY(0.3);
            }
        }

        @keyframes mymove3 {
            0% {
                transform: scaleY(0.1);
            }

            100% {
                transform: scaleY(1);
            }
        }
    </style>
</head>

<body>

    <div class="body">
        <div class="box move1"></div>
        <div class="box move2"></div>
        <div class="box move3"></div>
    </div>


</body>

</html>

前端酱紫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
6
评论
直播css小动画

直播css小动画做需求的时候 UI出了一个icon是一个直播的动画，我本以为这个是ui出一个gif图的，结果她让我写个动画，本来向怼她的，但是转念一想我也没做过这样的动画，就试试呗。大概就是这么个玩意儿：上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
复制链接

扫一扫