css实现仓鼠从天而降穿过云层自由落体下坠动画效果代码-html代码-BFW代码库

css实现仓鼠从天而降穿过云层自由落体下坠动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现仓鼠从天而降穿过云层自由落体下坠动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    :root {
        --cat-colour:#ddad6a;
        --cat-colour-dark:#c19557;
        --nose-colour:#dd746a;
        --stroke-width:7px;
        --stroke-colour:#1f1244;
        --sky:#48a5e2;
}
body {
        background:var(--sky);
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        height:100vh;
        overflow:hidden;
}
.cat-container {
        margin-top:40px;
        animation-name:falling;
        animation-duration:2.2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
}
.cat {
        position:relative;
}
.body {
        width:225px;
        height:250px;
        background:var(--cat-colour);
        border-radius:199px 147px 127px 154px;
        border:var(--stroke-width) solid var(--stroke-colour);
        position:relative;
}
.tummy {
        width:100px;
        height:115px;
        background:white;
        border-radius:50%;
        position:absolute;
        right:30px;
        bottom:30px;
}
.eye-mark {
        /*  use a clipping mask?  width:100px;
        height:100px;
        border-radius:50%;
        background:white;
        position:absolute;
        right:0;
        */
}
.ear-back {
        width:50px;
        height:65px;
        border-radius:50%;
        background:white;
        border:var(--stroke-width) solid var(--stroke-colour);
        position:absolute;
        left:170px;
        top:5px;
        transform:rotate(30deg);
        animation-name:ears;
        animation-duration:0.1s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
}
.ear-front {
        width:55px;
        height:70px;
        background:var(--stroke-colour);
        border-radius:50%;
        position:absolute;
        top:0;
        left:20px;
        transform:rotate(-30deg);
        animation-name:ears;
        animation-duration:0.1s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
}
.ear-inner {
        width:39px;
        height:65px;
        background:var(--cat-colour);
        border-radius:50%;
        position:relative;
        left:11px;
        top:12px;
}
.eye {
        width:20px;
        height:20px;
        background:var(--stroke-colour);
        border-radius:50%;
        position:absolute;
}
.eye-left {
        left:90px;
        top:45px;
}
.eye-right {
        right:30px;
        top:45px;
}
.nose {
        width:25px;
        height:10px;
        border-radius:50%;
        background:var(--nose-colour);
        border:solid 1px var(--stroke-colour);
        position:absolute;
        left:131px;
        top:49px;
}
.mouth {
        position:absolute;
        width:20px;
        height:25px;
        background:var(--cat-colour);
        border-radius:50%;
        border:solid 2px var(--stroke-colour);
}
.mouth-right {
        left:142px;
        top:53px;
}
.mouth-left {
        left:123px;
        top:53px;
}
.mouth:before {
        content:'';
        display:block;
        width:28px;
        height:30px;
        background:var(--cat-colour);
        position:relative;
        top:-20px;
        left:-5px;
}
.leg {
        background:var(--stroke-colour);
        width:50px;
        height:105px;
        border-radius:50%;
        position:absolute;
        bottom:-30px;
        left:-10px;
        transform:rotate(230deg);
}
.leg-inner {
        position:absolute;
        width:43px;
        height:100px;
        background:var(--cat-colour);
        border-radius:50%;
        right:4px;
        bottom:-4px;
}
.leg-front {
        top:100px;
        left:11px;
        transform-origin:bottom center;
        animation-name:leg-back;
        animation-duration:.7s;
        animation-iteration-count:infinite;
        animation-delay:0.1s;
        animation-direction:alternate;
}
.leg-back {
        left:190px;
        transform:rotate(120deg);
        animation-name:leg-back;
        an.........完整代码请登录后点击上方下载按钮下载查看