css实现风车动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div布局实现一个风车转动的动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <style> .loadpage { position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; z-index:999; } .load { width:200px; height:200px; position:fixed; left:50%; top:50%; margin-left:-100px; margin-top:-200px; } .load p { width:100%; color:red; position:absolute; bottom:-200px; left:0; text-align:center; } .load:before { content:''; display:block; width:10px; height:200px; background:#f5f5f5; position:absolute; left:50%; margin-left:-5px; top:50%; } .load:after { content:''; display:block; width:8px; height:8px; border:8px solid #fff; position:absolute; left:50%; top:50%; margin-left:-12px; margin-top:-12px; border-radius:50%; z-index:10; } .load .fan { width:50px; height:100px; overflow:hidden; position:absolute; z-index:9; background:#35ada3; -webkit-animation:zhuan 2s linear infinite; animation:zhuan 2s linear infinite; } .load .fan:before { content:''; display:block; position:absolute; width:100px; height:100px; background:#bc413c; overflow:hidden; box-shadow:0 0 2px 4px rgba(0,0,0,0.1) inset; } .load .fan:nth-of-type(1) { left:50px; top:0; border-radius:60px 0 0 0; -webkit-transform-origin:50px 100px; transform-orig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0