美文网首页
CSS3加载中动画特效demo

CSS3加载中动画特效demo

作者: 程序蜗牛 | 来源:发表于2017-07-31 12:39 被阅读58次

    css3动画特效一个,很简单,直接上代码,看不懂的可以留言咨询

    css3加载动画特效.gif
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>css3旋转加载动画效果</title>
    
        <style>
          body,html{width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
          .load-cons{
            position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: 8;
            background-color: rgba(255, 255, 255, 0.9);
          }
          .load-span{
            width:50px;height: 50px;position:relative;
            margin: 0 auto;margin-top: 50%;
          }
          .load-span span{
            display: block;border-radius: 50%;-webkit-border-radius:50%;-moz-border-radius:50%;
            width:50px;height: 50px;box-shadow: 0 3px 0 #108ee9;
            animation: route 1s infinite linear;
            -webkit-animation: route 1s infinite linear;
          }
          .load-span i{
            display: inline-block;width: 50px;height: 50px;position: absolute;top:0;left: 0;
            font-size: 10px;font-style: normal;text-align:center;line-height: 50px;
            color:#666;
          }
          @-webkit-keyframes route {
              0%{-webkit-transform: rotate(0deg);}
              100%{-webkit-transform: rotate(360deg);}
          }
          @keyframes route {
              0%{transform: rotate(0deg);}
              100%{transform: rotate(360deg);}
          }
        </style>
    
      </head>
      <body>
        <div class="load-cons">
          <div class="load-span">
            <span></span>
            <i>加载...</i>
          </div>
        </div>
        ![](http://b.hiphotos.baidu.com/image/h%3D220/sign=9e290fdd0e082838770ddb168898a964/6159252dd42a28348dcd92c952b5c9ea14cebf8d.jpg)
      </body>
    </html>
    
    #图片直接百度的链接
    

    还会持续更新css3特效

    相关文章

      网友评论

          本文标题:CSS3加载中动画特效demo

          本文链接:https://www.haomeiwen.com/subject/pcallxtx.html