zoukankan html css js c++ java

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;

查看全文

相关阅读:
Mysql 重做日志及与二进制日志的区别
 【MySql】性能优化之分析命令
 ubuntu一些基本软件安装方法
 Linux学习笔记
 exp/imp三种模式——完全、用户、表
 Oracle学习日志20150302
如何在macOS Sierra中运行CORE Keygen破解程序
 国内各大互联网公司技术站点集合
 React Native资料
 React Native集成到现有项目(非cocoa pods)

原文地址：https://www.cnblogs.com/justSmile2/p/11123504.html