css实现万圣节漂浮的小鬼动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现万圣节漂浮的小鬼动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style> body{ margin:0; color:#444; background:#ffff33; font:300 18px/18px Roboto, sans-serif; zoom:300%; } *,:after,:before{box-sizing:border-box} .pull-left{float:left} .pull-right{float:right} .clearfix:after,.clearfix:before{content:'';display:table} .clearfix:after{clear:both;display:block} .halloween .head .skull:before, .halloween .head .skull:after, .halloween .eyes .eye:before, .halloween .body:before, .halloween .body:after, .halloween .legs:before{ content:''; position:absolute; } .halloween{ top:50%; left:50%; width:30px; height:44px; position:fixed; margin-top:-22px; margin-left:-15px; animation:move 3s infinite; } .halloween .head{ z-index:1; width:25px; height:25px; background:#444; border-radius:50%; position:relative; } .halloween .head .skull{ left:2px; bottom:2px; width:16px; height:16px; color:#f9f9f9; border-radius:50%; background:#f9f9f9; position:absolute; animation:skull 3s infinite; } .halloween .head .skull:before{ top:9px; width:0; left:50%; height:0; z-index:1; margin-left:-2px; border:2px solid transparent; border-bottom:2px solid #444; } .halloween .head .skull:after{ top:14px; left:50%; width:1px; height:4px; margin-left:-1px; background:#f9f9f9; box-shadow: 2px 0,-2px 0,4px 0,-4px 0, -3px -2px,-1px -2px,1px -2px,3px -2px } .halloween .eyes{ width:inherit; height:inherit; overflow:hidden; border-radius:50%; position:relative; } .halloween .eyes .eye{ top:5px; width:5px; height:5px; position:absolute; border-radius:50%; background:#f8cd22; border:1px solid #444; border-right:2px solid #444; } .halloween .eyes .eye:before{ top:-1px; left:-1px; width:5px; height:3px; background:#f9f9f9; border-radius:5px 5px 0 0; animation:eyes 3s infinite; } .halloween .eyes .eye.eye-left{ left:1px; } .halloween .eyes .eye.eye-right{ right:1px; } .halloween .body{ top:-3px; width:24px; height:17px; background:#444; position:relative; border-radius:10px 10px 2px 2px; } .halloween .body:before, .halloween .body:after{ top:3px; width:4px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0