css实现9种loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现9种loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> .ouro { position: relative; display: inline-block; height: 46px; width: 46px; margin: 1em; border-radius: 50%; background: none repeat scroll 0 0 #DDDDDD; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); } .ouro:after { content: ""; position: absolute; top: 9px; left: 9px; display: block; height: 28px; width: 28px; background: none repeat scroll 0 0 #F2F2F2; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.1); } .ouro > span { position: absolute; height: 100%; width: 50%; overflow: hidden; } .left { left: 0 } .right { left: 50% } .anim { position: absolute; left: 100%; top: 0; height: 100%; width: 100%; border-radius: 999px; background: none repeat scroll 0 0 #508EC3; opacity: 0.8; -webkit-animation: ui-spinner-rotate-left 3s infinite; animation: ui-spinner-rotate-left 3s infinite; -webkit-transform-origin: 0 50% 0; transform-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0