使用关键帧写一个loading 的小案例

团酱

已于 2022-03-11 00:34:31 修改

阅读量348

点赞数

分类专栏： HTML基础随笔文章标签： html css css3

于 2022-03-08 00:41:06 首次发布

本文链接：https://blog.csdn.net/qq_46703452/article/details/123343436

版权

随笔同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

HTML基础

15 篇文章 0 订阅

订阅专栏

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>
        .loading{
            width: 59px;
            height: 40px;
            margin: 60px auto;
            text-align: center;
            /* border: 1px solid black; */
        }
        span{
            width: 5px;
            height: 100%;
            display: inline-block;
            background-color: burlywood;
            /* infinite 无线循环ease-in-out两头慢*/
            animation: ani 1.2s infinite ease-in-out;
        }
        span:nth-child(2){
            animation-delay: -1s;
        }
        span:nth-child(3){
            animation-delay: -0.6s;
        }
        span:nth-child(4){
            animation-delay: -0.5s;
        }
        span:nth-child(5){
            animation-delay: -1.3s;
        }
        span:nth-child(6){
            animation-delay: -1.6s;
        }
        @keyframes ani{
            0%{
                transform: scaleY(0.4);
            }
            15%{
                transform: scaleY(0.7);
            }
            25%{
                transform: scaleY(1);
            }
            35%{
                transform: scaleY(0.7);
            }
            45%{
                transform: scaleY(0.6);
            }
            60%{
                transform: scaleY(0.5);
            }
            75%{
                transform:scaleY(0.4);
            }
            85%{
                transform: scaleY(0.6);
            }
            100%{
                transform: scaleY(1);
            }
        }
    </style>
</head>
<body>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

2

<!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>
        html {
            font-size: 10px;
        }

        .loading {
            /* rem是相对于html标签里面设置字体大小 1rem=html设置的font-size的大小 */
            width: 3rem;
            height: 3rem;
            margin: 100px auto;
            position: relative;
            /* border: 1px solid rebeccapurple; */
        }

        .circle {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /* border: 1px solid rgb(166, 132, 201); */
        }
        .circle span:nth-child(1){
            left: 0;
            top: 0;
        }
        .circle span:nth-child(2){
            right: 0;
            top: 0;
        }
        .circle span:nth-child(3){
            right: 0;
            bottom: 0;
        }
        .circle span:nth-child(4){
            bottom: 0;
            left: 0;
        }
        span{
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: royalblue;
            display: inline-block;
            animation: ani infinite ease-in-out 1.2s;
        }
        .circle2{
            transform: rotateZ(45deg);
        }
        .circle1 span:nth-child(1){
            animation-delay:-1.1s;
        }
        .circle2 span:nth-child(1){
            animation-delay:-0.9s;
        }
        .circle1 span:nth-child(2){
            animation-delay:-0.8s;
        }
        .circle2 span:nth-child(2){
            animation-delay:-0.6s;
        }
        .circle1 span:nth-child(3){
            animation-delay:-0.5s;
        }
        .circle2 span:nth-child(3){
            animation-delay:-0.4s;
        }
        .circle1 span:nth-child(4){
            animation-delay:-0.3s;
        }
        .circle2 span:nth-child(4){
            animation-delay:-0.1s;
        }
        @keyframes ani{
            0%{
                transform: scale(0);
            }
            40%{
                transform: scale(1.0);
            }
            80%{
                transform: scale(0);
            }
            100%{
                transform: scale(0);
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="circle circle1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="circle circle2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        // 在窗口发生变化的时候会触发，动态修改根元素字体大小
        window.onresize = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth/100+'px'
        }
    </script>
</body>

</html>

团酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用关键帧写一个loading 的小案例

<!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>...
复制链接

扫一扫

专栏目录