html+css3的加载logo

ZiYang.Li

已于 2022-03-23 23:05:13 修改

阅读量263

点赞数

分类专栏：前端文章标签： html5 css3 css html 前端

于 2022-03-23 22:57:44 首次发布

本文链接：https://blog.csdn.net/qq_44704200/article/details/123698850

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习目标：

观看徐超老师的视频，通过html和css3 制作加载图标

学习内容：

例如：

学习transform
学习animation

学习时间：

2022年3月23号周三晚上

学习产出：

例如：

学习笔记
CSDN 技术博客 1 篇
做出了加载logo

在这里插入图片描述

<!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;
        }
        @keyframes myanimate{
            0%{background-color: red;height: 55px;}
            50%{
                background-color: yellow;
                /* height: 70px; */
                transform: scale(1,2);
            }
            100%{
                background-color: pink;
                /* height: 40px; */
                transform: scale(1,1);
            }
        }
        .box{
           width: 200px;
           margin: auto;
           margin-top: 50px;
        }
        .line_1,.line_2,.line_3,.line_4{
            
            width: 10px;
            height: 50px;
            background-color: red;
            margin-right: 10px;
            border-radius: 5px;
            animation: myanimate 1s infinite;
        }
        .fl{
            float: left;
        }
        .clear{
            clear: both;
        }
        .line_1{
            animation-delay: 0.2s;
        }
        .line_2{
            animation-delay: 0.4s;
        }
        .line_3{
            animation-delay: 0.6s;
        }
        .line_4{
            animation-delay: 0.8s;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="line_1 fl"></div>
        <div class="line_2 fl"></div>
        <div class="line_3 fl"></div>
        <div class="line_4 fl"></div>
        <div class="clear"></div>
    </div>
</body>
</html>