加载动态效果（8点圆形转）-4

来源：互联网发布：淘宝有什么好看的衣服编辑：程序博客网时间：2024/06/09 16:01
.loader{font-size: 20px;width: 1em;height: 1em;border-radius: 50%;position: relative;text-indent: -9999em;box-shadow: 0em 0em 0 .2em #fff,2em 1em 0 0 #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 0 #fff;animation: load-effect 3s infinite linear;-webkit-animation: load-effect 2s infinite linear;;}@keyframes load-effect{0%,100%{box-shadow: 0em 0em 0 .2em #fff,2em 1em 0 0 #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 0 #fff;}12.5%{box-shadow: 0em 0em 0 0 #fff,2em 1em 0 0.2em #fff,3em 3em 0 0 #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;}25%{box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 0 #fff,3em 3em 0 0.2em #fff,2em 5em 0 0 #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;}37.5%{box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 0 #fff,2em 5em 0 0.2em #fff,0 6em 0 0 #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;}50%{box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 0 #fff,0 6em 0 0.2em #fff,-2em 5em 0 0 #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;}62.5%{box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 0 #fff,-2em 5em 0 0.2em #fff,-3em 3em 0 0 #fff,-2em 1em 0 -0.5em #fff;}75%{box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 0 #fff,-3em 3em 0 0.2em #fff,-2em 1em 0 0 #fff;}87.5%{box-shadow: 0em 0em 0 0 #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 0 #fff,-3em 3em 0 0 #fff,-2em 1em 0 0.2em #fff;}}loading...
阅读全文
0 0