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

css实现万圣节胖胖的小鬼漂浮动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现万圣节胖胖的小鬼漂浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        body {
        background: #1f1f1f;
    }
    
    .ghost {
        display: block;
        width: 40vh;
        height: 40vh;
        background: #f2d5fa;
        border-radius: 50%;
        will-change: transform;
        z-index: 10;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-animation: bob 2s;
        animation: bob 2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse;
    }
    
    .eyes:after, .eyes:before {
        content: "";
        display: block;
        width: 2.5vh;
        height: 4vh;
        position: absolute;
        top: 7vh;
        left: 12vh;
        background: #7963e3;
        border-radius: 50%;
        will-change: margin;
        -webkit-animation: mbob 2s;
        animation: mbob 2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse;
    }
    .eyes:before {
        transform: rotate(20deg);
    }
    .eyes:after {
        left: auto;
        right: 12vh;
        transform: rotate(-20deg);
    }
    
    .mouth {
        display: block;
        width: 13vh;
        height: 5.25vh;
        margin: 15vh auto;
 .........完整代码请登录后点击上方下载按钮下载查看