纯CSS3动态加载中效果
纯CSS3制作的加载中效果,可以用于页面加载动画等处,代码效果如下:
代码分为占位容器代码与样式代码,分别如下:
容器代码:
加载中
样式代码:
.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)}}
加载中