zoukankan      html  css  js  c++  java
  • css3 动画 -- 加载动画 Loader

    1.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div class="loader"></div>
      </body>
    </html>

    2.css

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #000;
    }
    .loader {
      position: absolute;
       150px;
      height: 150px;
      border-radius: 50%;
      background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
      animation: animate 2s linear infinite;
    }
    @keyframes animate {
      0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
      }
    }
    .loader::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      background: #000;
      border-radius: 50%;
      z-index: 1000;
    }
    .loader::after {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
      border-radius: 50%;
      z-index: 1;
      filter: blur(30px);
    }

    3.效果图

  • 相关阅读:
    设计一个移动应用的本地缓存机制
    LeetCode 15
    POJ 2411
    Mahout构建图书推荐系统【一起学Mahout】
    firefox篇
    zTree实现删除树节点
    Tomcat与Servlet工作流程
    cocos2d 重写顶点着色语言
    将HTML格式的String转化为HTMLElement
    JQuery总结
  • 原文地址:https://www.cnblogs.com/crazycode2/p/13563410.html
Copyright © 2011-2022 走看看