zoukankan      html  css  js  c++  java
  • 纯css实现loading动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
    <!-- 内部样式 -->
    <style>
    /* 清楚默认样式*/
    *{
    margin:0;
    padding: 0;
    }
    html,body{
    /* 让网页主题和浏览器的w||H一边大 */
    100%;
    height: 100%;
    }
    /* div最外层容器标签 */
    .box{
    /* */
    100%;
    height: 100%;
    /* 渐变颜色*/
    /*background-image: linear-gradient(to right,red,orange,yellow,blue,cyan,blue,purple);*/
    /* div采用flex布局 */
    display: flex;
    /* 水平剧中*/
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /*animation: change 2s linear 0s infinite;*/
    }
    /* 无须列表 */
    ul{
    position: relative;
    120px;
    height: 120px;
    /* border: 1px solid black; */
    list-style: none;
    }
    ul li{
    position: absolute;
    /* 和他的老父亲一边宽 */
    100%;
    height: 100%;
    /* 旋转 */
    transform:rotate(calc(18deg * var(--i)));
    }
    /* 给每一个li元素添加内部子元素:伪元素 */
    ul li::after{
    position: absolute;
    /* 伪元素无比要有content */
    content: '';
    15px;
    height: 15px;
    background:cyan;
    left:0px;
    top:0px;
    border-radius: 50%;
    /* 调用动画 动画名字 动画总时间 动画速率 第一次动画延迟时间 动画执行次数*/
    animation: donghua 2s linear infinite;
    /* 延迟时间*/
    animation-delay: calc(0.1s * var(--i))
    }
    /* 声明动画 */
    @keyframes donghua{
    from{
    transform: scale(1);
    }
    to{
    transform: scale(0);
    }
    }

    /* 镜像:颜色进行动画 */
    @keyframes change {
    from{
    filter: hue-rotate(0deg)
    }
    to{
    filter: hue-rotate(360deg)
    }
    }

    </style>
    </head>
    <body>
    <!-- 网页主题部分 -->
    <div class="box">
    <!-- 无需列表展示loading图形 -->
    <ul>
    <li style="--i:1;"></li>
    <li style="--i:2;"></li>
    <li style="--i:3;"></li>
    <li style="--i:4;"></li>
    <li style="--i:5;"></li>
    <li style="--i:6;"></li>
    <li style="--i:7;"></li>
    <li style="--i:8;"></li>
    <li style="--i:9;"></li>
    <li style="--i:10;"></li>
    <li style="--i:11;"></li>
    <li style="--i:12;"></li>
    <li style="--i:13;"></li>
    <li style="--i:14;"></li>
    <li style="--i:15;"></li>
    <li style="--i:16;"></li>
    <li style="--i:17;"></li>
    <li style="--i:18;"></li>
    <li style="--i:19;"></li>
    <li style="--i:20;"></li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    JavaSE—集合框架
    JavaSE——集合框架
    RocketMq 在Netty 下是如何进行消息封装传输
    SpringBoot 初始化流程以及各种常见第三方配置的源码实现
    Java 重要知识点,踩过的坑
    Mysql 知识储备以及InnoDB
    java 编程英语单词,语句
    PlantUML
    Rocketmq broker 消息仓库
    AutowiredAnnotationBeanPostProcessor 的一些思考
  • 原文地址:https://www.cnblogs.com/hongyumao/p/14312931.html
Copyright © 2011-2022 走看看