zoukankan      html  css  js  c++  java
  • 使用 css 的 keyframe 实现 loading 动画

     效果查看:https://jsfiddle.net/rubys/je16qL5k/6/

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css animation</title>
      <style>
        body {
          background-color: gray;
        }
        @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
        @-webkit-keyframes spin { 100% { -webkit-transform:  rotate(360deg); } }
        @keyframes spin { 100% { -webkit-transform:  rotate(360deg); transform: rotate(360deg); } }
    
        .preloader {
          animation-name: spin;
          animation-duration: .5s;
          animation-timing-function: linear;
          -webkit-animation-delay: 0s;
          animation-animation-delay: 0s;
          animation-iteration-count: infinite;
          animation-direction: normal;
          animation-fill-mode: none;
          animation-play-state: running;
          border: 2px solid transparent;
          border-top: 2px solid #fff;
          border-left: 2px solid #fff;
          border-radius: 50px;
          opacity: 1;
           32px;
          height: 32px;
          cursor: wait;
          display: block;
          transition: all 400ms ease !important;
          -webkit-animation: spin .6s linear infinite;
          -o-animation: spin .6s linear infinite;
          animation: spin .6s linear infinite;
        }
    
        #animation {
    
        }
      </style>
    </head>
    <body>
    
    <div id="animation" class="preloader"></div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    软件课设Day18
    软件课设Day17
    软件课设Day16
    2019/09/12最新进展
    2019/09/11最新进展
    2019/09/10最新进展
    2019/09/09最新进展
    2019/09/08最新进展
    2019/09/07最新进展
    2019/09/06最新进展
  • 原文地址:https://www.cnblogs.com/eleven24/p/8648839.html
Copyright © 2011-2022 走看看