加载动画一

2021/10/29 23:17:26

编程Tag： 动画加载 height transform load rotate

本文主要是介绍加载动画一，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

之前在B站收藏了一个加载动画合集，但是一直忘记看了。今天先写另外一个加载动画。先上效果图
在这里插入图片描述
这是一个简单的加载动画，正好熟悉一下之前学习伪元素和动画

<!DocType html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加载动画</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #2c3e50;
            overflow: hidden;
        }
        .load{
            position: relative;
            width: 80px;
            height: 80px;
        }
        .load::before,
        .load::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border:50px solid transparent;
            border-bottom-color: #fff;
            animation: rotateA 2s linear infinite .5s;
        }
        .load::before{
            transform: rotate(90deg);
            animation: rotateB 2s linear infinite;
        }
        @keyframes rotateA {
            0%,25%{
                transform: rotate(0deg);
            }
            50%,75%{
                transform: rotate(180deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @keyframes rotateB {
            0%,25%{
                transform: rotate(90deg);
            }
            50%,75%{
                transform: rotate(270deg);
            }
            100%{
                transform: rotate(450deg);
            }
        }
    </style>
</head>
<body>
    <div class="load"></div>
</body>
</html>

这篇关于加载动画一的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

加载动画一

相关编程文章