zoukankan      html  css  js  c++  java
  • 几行css3代码实现超炫加载动画

    之前为大家分享了css3实现的加载动画。今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效。我们一起看下效果图:

    在线预览   源码下载

    实现代码:

    极简的html代码:

    <div>
            <i></i>
    </div>

    css3代码:

    body {
      background: black;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 100vh;
    }
    
    @-webkit-keyframes rotation {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @keyframes rotation {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    div {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid rgba(0, 120, 255, 0.5);
      -webkit-box-shadow: 0px 0px 20px rgba(0, 120, 255, 0.5), inset 0px 0px 20px rgba(0, 120, 255, 0.5);
      box-shadow: 0px 0px 20px rgba(0, 120, 255, 0.5), inset 0px 0px 20px rgba(0, 120, 255, 0.5);
      margin: auto;
      position: relative;
    }
    div i {
      content: "";
      display: block;
      width: 0;
      height: 15px;
      position: absolute;
      top: -webkit-calc(50% - 5px);
      top: calc(50% - 5px);
      left: 2px;
      -webkit-box-shadow: 0px 0px 50px 10px #0078ff;
      box-shadow: 0px 0px 50px 10px #0078ff;
      -webkit-transform-origin: 100px 0;
      -ms-transform-origin: 100px 0;
      transform-origin: 100px 0;
      -webkit-animation: rotation linear 2s infinite;
      animation: rotation linear 2s infinite;
    }

    原文地址:http://www.w2bc.com/Article/6293

  • 相关阅读:
    一个php soap的错误记录
    Android 开发有哪些新技术出现?
    每个PHP开发者都应该看的书
    30 个 PHP 的 Excel 处理类
    PHP Session可能会引起并发问题
    PHP代码优化技巧大盘点
    分析和解析PHP代码的7大工具
    关于 PHP 7 你必须知道的五件事
    PHP也20岁了
    PHP高级特性二之文件处理
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/3960954.html
Copyright © 2011-2022 走看看