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;
        margin-left: 20.5vh;
        position: relative;
        -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;
    }
    
    .mouth__part {
        display: block;
        width: 3vh;
        height: 5vh;
        border: 0vh solid #7963e3;
        margin: -0.5vh;
        float: left;
        position: relative;
        background: #7963e3;
        border-radius: 50%;
        overflow: hidden;
        transform: rotate(0deg);
    }
    
    .mouth__part:nth-child(2),
    .mouth__part:nth-child(5) {
        margin-top: -0.85vh;
    }
    
    .mouth__part:nth-child(3),
    .mouth__part:nth-child(4) {
        margin-top: -1vh;
    }
    
    .bubble {
        display: block;
        width: 1vh;
        height: 1vh;
        background: #78d9e1;
        position: absolute;
        bottom: -0.3vh;
        left: 0;
        border-radius: 50%;
        margin-top: 100px;
        -webkit-animation: bob-bot 2s;
        animation: bob-bot 2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse;
    }
    .bubble.low {
        bottom: -0.5vh;
        left: 0.3vh;
    }
    
    .bubble:nth-child(2) {
        display: block;
        width: 2vh;
        height: 2vh;
        bottom: -1vh;
        left: 0.5vh;
    }
    .bubble:nth-child(2).low {
        bottom: -1.5vh;
    }
    
    .blood-drips__drip {
        display: block;
        width: 1vh;
        height: 1vh;
        background: #78d9e1;
        position: absolute;
        bottom: 0.2vh;
        right: 2vh;
        border-radius: 50%;
        -webkit-animation: drip 1s ease-in;
        animation: drip 1s ease-in;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
    
    .arm {
        display: block;
        width: 5vh;
        height: 8vh;
        position: absolute;
        top: 16vh;
        left: 0vh;
        background: #f2d5fa;
        border-radius: 50%;
        transform-origin: center top;
    }
    
    .arm:nth-child(1) {
        transform: rotate(30deg);
        border-right: 1vh solid #c3b9f3;
        -webkit-animation: left-arm-wobble 1s ease-in;
        animation: left-arm-wobble 1s ease-in;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate-reverse;
        animation-direction: alternate-reverse;
    }
    
    .arm:nth-child(2) {
        transform: rotate(-30deg);
        border-left: 1vh solid #c3b9f3;
        left: auto;
        right: 0vh;
        -webkit-animation: right-arm-wobble 1s ease-in;
        animation: right-arm-wobble 1s ease-in;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
 .........完整代码请登录后点击上方下载按钮下载查看