• 本站搬迁至Linode机房,购买Linode 1G机型仅需$10/月,点此访问官网
  • 百度口碑求好评,http://koubei.baidu.com/s/www.zhiyanblog.com
  •    6个月前 (07-02)  前端源码 |   12 条评论  529 
    文章评分 5 次,平均分 4.6

    CSS3制作的加载中效果,可以用于页面加载动画等处,代码效果如下:

    css3-loading

    css3-loading

    代码分为占位容器代码与样式代码,分别如下:

    容器代码:

    <div class="load-container load1"><div class="loader">加载中</div></div>
    

    样式代码:

    .load-container {
      position: relative;
      width: 240px;
      height: 240px;
      margin: 0 auto;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      box-sizing: border-box;
    }
    .load-container:before {
      content: '加载中';
      display: block;
      position: absolute;
      bottom: 103px;
      font-size: 14px;
      line-height: 200%;
      text-align: center;
      left: 0;
      right: 0;
      color: #7d7f80;
      box-sizing: border-box;
    }
    .load1 .loader {
      border-radius: 50%;
      font-size: 12px !important;
      width: 6em;
      height: 6em;
      margin: 7em auto;
      position: relative;
      text-indent: -9999em;
      border: 0.2em solid #e3e3e3;
      border-left: 0.2em solid #303233;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      -moz-transform: translateZ(0);
      animation: load 0.85s infinite linear;
      -o-animation: load 0.85s infinite linear;
      -webkit-animation: load 0.85s infinite linear;
      -moz-animation: load 0.85s infinite linear;
    }
    @-ms-keyframes load{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}}
    @-moz-keyframes load{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}}
    @-webkit-keyframes load{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}}
    @-o-keyframes load{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}}
    @keyframes load{0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}}
    




    加载中


     

    除特别注明外,本站所有文章均为知言的自留地原创,转载请注明出处来自http://www.zhiyanblog.com/css3-loading-effect.html

    关于
    知言博客是由WordPress业余爱好者zhiyan建立的WordPress以及WEB资源站,集WordPress教程、主题、插件以及众多前端素材、代码等其他内容于一体,努力为相关用户提供帮助。

    发表评论

    表情 格式

    1. 学习

      z_devil 评论达人 LV.5 3个月前 (10-12) [0] [0]
    2. 好好学习

      siyeah 评论达人 LV.3 4个月前 (09-13) [0] [0]
    3. 还不错 :sad:

      djyesu 评论达人 LV.5 4个月前 (09-08) [0] [0]
    4. 酷炫的

      一如既往的美 评论达人 LV.1 4个月前 (08-23) [3] [0]
    5. 很棒的东东,收了

      河南米联电子科技 评论达人 LV.1 4个月前 (08-21) [0] [0]
    6. 很不错

      河南米联电子科技 评论达人 LV.1 4个月前 (08-21) [0] [0]
    7. 很好看

      书~香飘飘 评论达人 LV.1 5个月前 (08-15) [0] [0]
    8. 效果不错

      qkwu 评论达人 LV.5 5个月前 (08-14) [0] [0]
    9. 这个效果好

      tianming 评论达人 LV.5 5个月前 (08-13) [0] [0]
    10. 这个效果好

      书~香飘飘 评论达人 LV.1 5个月前 (08-06) [0] [0]
    11. 赞啊,正缺这个!

      狂族晨曦 评论达人 LV.1 6个月前 (07-06) [0] [0]
    12. 不错!

      hallo 评论达人 LV.5 6个月前 (07-04) [1] [0]
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享