css实现万圣节漂浮的小鬼动画效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看