纯CSS3动态加载中效果
纯CSS3制作的加载中效果，可以用于页面加载动画等处，代码效果如下：
css3-loading
代码分为占位容器代码与样式代码，分别如下：
容器代码：
|
1 |
<div class="load-container load1"><div class="loader">加载中</div></div> |
样式代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.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)}} |
加载中
除特别注明外，本站所有文章均为WebApproach原创，转载请注明出处来自https://webapproach.net/css3-loading-effect.html
赞一下
- 2 个人已赞
支持下下！
:grin: :grin: :grin: :grin: 不错的效果。。。
牛牛
学习
好好学习
游戏
还不错 :sad:
keyime ma 吗
酷炫的
很棒的东东，收了
很不错
很好看
效果不错
这个效果好
这个效果好
赞啊，正缺这个！
可以啊
不错！
我也觉得不错