记录CSS动态加载条样式

2017年10月24日23:02:34 6 1,144

记录一下css动态加载条样式随便分享全部代码,效果看下图,动态图看文章低部,已添加左右居中,上下居中样式,如果还不喜欢自己改吧。记录CSS动态加载条样式

  1. <div class="aaa ">
  2. <div class="aaa bbb aaa">诗梦博客</div>
  3. </div>
  4. <style type="text/css">
  5. .aaa .aaa.bbb{background#6582c3;}
  6. .aaa .aaa{background#d5d6d6;height30px;text-aligncenter;line-height:30px;height:30px;}
  7. .aaa .aaa.aaa1{background#d9534f;}
  8. .aaa .aaa.aaa{background-image:linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size40px 40px; -webkit-animation:per-animation 1.5s linear infinite; transition: width .6s ease;}
  9. @-webkit-keyframes per-animation{from{background-position:40px 0}to{background-position:0 0}}
  10. </style>

动态效果图:记录CSS动态加载条样式

诗梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  4   博主  2

    • avatar 知道91 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 1

      喜迎十九大~~~ :razz: :razz:

        • avatar 小未 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 中国 移动 2

          @知道91 对方不想跟你说话并向你丢了一朵小黄花 :twisted:

        • avatar 知道91 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 1

          喜迎十九大~~~ :razz: :razz: 哥们是主机推广员吧 :razz:

            • avatar 诗梦 Admin 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 广东省广州市 电信

              @知道91 不是你才是

            • avatar Edwiin 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 0

              = =.aaa bbb ccc是什么。。表示完全没看懂,好多变量~~

                • avatar 诗梦 Admin 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 广东省广州市 电信

                  @Edwiin 我能怎么办,我也只是照抄?自己的