css3 加载动画

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: #333;
        }

        .loading {
            position: relative;
            margin: 50px;
            width: 200px;
            height: 200px;
            text-align: center;  
        }

        .loading1 .text {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            margin-top: -80px;
            margin-left: -80px;
            width: 160px;
            height: 160px;
            line-height: 160px;
            font-size: 30px;
            color: #fff;
        }

        .loading1 .text {     
            animation: text1 2.5s ease-in-out infinite;
        }

        .loading1 .box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -80px;
            margin-left: -80px;
            width: 160px;
            height: 160px;
            background-color: #fff;
            animation: changeShape 2.5s ease-in-out infinite;
        }

        @keyframes changeShape {
            0% {
                border-radius: 0%;
                background-color: pink;
                transform: scale(1) rotate(0deg);
            }

            50% {
                border-radius: 50%;
                background-color: skyblue;
                transform: scale(0.5) rotate(360deg);
            }

            100% {
                border-radius: 0%;
                background-color: pink;
                transform: scale(1) rotate(0deg);
            }
        }

        @keyframes text1 {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(0.5);
            }

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

        .loading2 {
            text-align: center;
        }

        .loading2 .text {
            position: absolute;
            width: 100%;
            z-index: 10;
            top: 0;
            left: 0;
            line-height: 200px;
            font-size: 30px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }
        .loading2 .text span{
            display: inline-block;
            animation: word 1.6s ease-in-out infinite;
        }
        .loading2 .text span:nth-child(2n){
            animation-delay: 0s;
        }
        .loading2 .text span:nth-child(2n-1){
            animation-delay: 0.4s;
        }

        .loading2 .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;   
            background-color: #fff;
            transform: rotate(45deg);
        }

        .loading2 .box span {
            position: absolute;
            display: inline-block;
            width: 5px;
            height: 100%;
            background-color: red;            
        }

        .loading2 .box span:nth-child(1) {
            top: 5px;
            left: 0;
            transform-origin: top left;
            transform: rotate(-90deg);
            background-color: #000;
            animation: changeT 1.5s ease-in-out infinite;
  
        }

        .loading2 .box span:nth-child(2) {
            top: 0;
            right: 0;
            background-color: blue;
            animation: changeR 1.5s ease-in-out infinite;
     
        }

        .loading2 .box span:nth-child(3) {
            bottom: 5px;
            right: 0;
            transform-origin: bottom right;
            transform: rotate(-90deg);
            background-color: #172;
            animation: changeB 1.5s ease-in-out infinite;
        
        }

        .loading2 .box span:nth-child(4) {
            top: 0;
            left: 0;
            background-color: purple;
            animation: changeL 1.5s ease-in-out infinite;
      
        }

        @keyframes changeT {
            0% {
                left: 200px;
            }

            50% {
                left: 0px;
            }

            100% {
                left: -200px;
            }

        }

        @keyframes changeR {
            0% {
                top: 200px;
            }

            50% {
                top: 0px;
            }

            100% {
                top: -200px;
            }
        }

        @keyframes changeB {
            0% {
                right: 200px;
            }

            50% {
                right: 0px;
            }

            100% {
                right: -200px;
            }
        }

        @keyframes changeL {
            0% {
                top: -200px;
            }

            50% {
                top: 0px;
            }

            100% {
                top: 200px;
            }
        }

        @keyframes word{
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.2);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="loading loading1">
        <div class="text">loading</div>
        <div class="box"></div>
    </div>
    <div class="loading loading2">
        <div class="text">
            <span>l</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span>i</span>
            <span>n</span>
            <span>g</span>
        </div>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

View Code

细节点：居中与缩放实现属性不能同时使用 transform 字体大小缩放效果 font-size 不如 scale

重点代码：

transform: scale(1);

transform: rotate(45deg); transform-origin: top left;

transform: scale(1) rotate(0deg);

display: flex;

justify-content: center;

align-items: center;

animation: text1 2.5s ease-in-out infinite;

animation-delay: 0s;

相关阅读:
MVC概念性的内容
 类 class
php获取真实IP地址
 面向对象static静态的属性和方法的调用
 smarty 入门2（个人总结）
smarty入门
 读取文件内容fopen,fgets,fclose
mysql常用命令
 mybatis查询的三种方式
 MyBatis 映射文件
原文地址：https://www.cnblogs.com/justSmile2/p/11123504.html