css布局实现兔子吹泡泡动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现兔子吹泡泡动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
:root {
        --bunny-size: 300px;
        --bunny-color: pink;
        --bunny-color-2: #f0a4cb;
        --bunny-eye-color: #473929;
        --bunny-cheek-color: red;
        --bunny-tongue-color: red;
        --bunny-mouth-color: #473929;
        --bunny-nose-color: #473929;
        --stick-color: #ff8819;
        --stick-bubble-color-1: #9e9eff;
        --stick-bubble-color-2: white;
        --text-color: #473929;
        --grass-color: #84cc84;
        --grass-color-2: lightgreen;
        --breathe-duration: 10s;
        --bubble-color-1: #4fd5e7;
        --bubble-color-2: #829fff;
        --bubble-color-3: #76e0cf;
        --bubble-color-4: #86befd;
        --bubble-color-5: #91f1d9
    }

        body {
            margin: 0;
            background: linen;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Balsamiq Sans',cursive
        }

        .bunny-container {
            width: var(--bunny-size);
            height: var(--bunny-size)
        }

        .bunny {
            width: 230px;
            height: 300px;
            transform: translateX(70px)
        }

        .bunny * {
            position: absolute
        }

        .bunny__body {
            width: 200px;
            height: 200px;
            background: var(--bunny-color);
            border-radius: 100px 100px 30px 0;
            transform: translateY(80px)
        }

@keyframes eyesAnim {
            0%,15%,17%,79%,81% {
                transform: translate(40px,40px) rotateZ(6deg)
            }

            16%,80% {
                transform: translate(40px,40px) rotateZ(6deg) scaleY(0.3)
            }

            60% {
                transform: translate(40px,30px) rotateZ(6deg)
            }

            10%,70%,100% {
                transform: translate(40px,40px) rotateZ(6deg)
            }}

        .bunny__eyes {
            padding: 6px;
            background: var(--bunny-eye-color);
            border-radius: 50%;
            box-shadow: 80px 0 var(--bunny-eye-color);
            transform: translate(40px,40px) rotateZ(6deg);
            animation: eyesAnim var(--breathe-duration) linear infinite
        }

@keyframes noseAnim {
            60% {
                transform: translate(70px,40px)
            }

            10%,70%,100% {
                transform: translate(70px,50px)
            }}

        .bunny__nose {
            padding: 5px 8px;
            background: var(--bunny-nose-color);
            border-radius: 50%;
            transform: translate(70px,50px);
            animation: noseAnim var(--breathe-duration) linear infinite
        }

        .bunny__nose::after {
            content: '|';
            text-shadow: 1px 0,-1px 0;
            color: var(--bunny-nose-color);
            position: absolute;
            font-size: 20px;
            font-weight: bolder;
            transform: translateX(-2px)
        }

@keyframes cheeksAnim {
            60% {
                transform: translate(10px,50px) rotateZ(5deg);
                opacity: .5
            }

            10%,70%,100%,0% {
                transform: translate(10px,55px) rotateZ(5deg);
                opacity: .2
            }}

        .bunny__cheeks {
            padding: 18px;
            background: var(--bunny-cheek-color);
            border-radius: 50%;
            transform: translate(10px,55px) rotateZ(5deg);
            box-shadow: 110px 0 var(--bunny-cheek-color);
            animation: cheeksAnim var(--breathe-duration) linear infinite
        }

@keyframes breatheMouthAnim {
            0%,10%,75%,78%,82%,86%,90%,94%,98%,100%,4%,8% {
                transform: translate(68px,70px)
            }

            60% {
                transform: translate(70px,70px) scale(3,2.5)
            }

            76%,80%,84%,88%,92%,96%,2%,6% {
                transform: translate(66px,70px)
            }}

        .bunny__mouth {
            padding: 8px 10px;
            background: var(--bunny-tongue-color);
            border-radius: 50%;
            transform: translate(66px,70px);
            box-shadow: inset 5px 8px var(--bunny-mouth-color);
            animation: breatheMouthAnim var(--breathe-duration) linear infinite
        }

        .bunny__ears {
            width: 200px;
            height: 100px
        }

@keyframes earLeftAnim {
            0%,10%,75% {
                transform: var(--transform-3)
            }

            15%,17%,65% {
                transform: var(--transform-1)
            }

            16% {
                transform: var(--transform-2)
            }

            25%,29%,42%,46%,56%,60% {
                transform: var(--transform-4)
            }

            23%,27%,31%,40%,44%,48%,54%,58%,62% {
                transform: var(--transform-1)
            }}

@keyframes earRightAnim {
            0%,10%,75% {
                transform: var(--transform-3)
            }

            13%,15%,65% {
                transform: var(--transform-1)
            }

            14% {
                transform: var(--transform-2)
            }

            28%,32%,44%,48%,55%,59% {
                transform: var(--transform-4)
            }

            26%,30%,34%,42%,46%,50%,53%,57%,61% {
                transform: var(--transform-1)
            }}

        .bunny__ear {
            width: 50px;
            height: 100px;
            border-radius: 50% 50% 0;
            background: var(--bunny-color);
            transform-origin: bottom left;
            box-shadow: inset 0 15px var(--bunny-color-2);
            transform: var(--transform-3)
        }

        .bunny__ear--left {
            --transform-1: translateX(50px) rotate(10deg);
            --transform-2: translateX(50px) rotate(5deg);
            --transform-3: translateX(50px) rotate(30deg);
            --transform-4: translateX(50px) rotate(8deg);
            animation: earLeftAnim var(--breathe-duration) linear infinite
        }

        .bunny__ear--right {
            --transform-1: translateX(125px) rotate(25deg);
            --transform-2: translateX(125px) rotate(20deg);
            --transform-3: translateX(125px) rotate(45deg);
            --transform-4: translateX(125px) rotate(23deg);
            animation: earRightAnim var(--breathe-duration) linear infinite
        }

        .bunny__feet {
            height: 35px;
            width: 200px;
            transform: translateY(265px)
        }

        .bunny__foot {
            height: 35px;
            width: 65px;
            background: var(--bunny-color-2);
            border-radius: 0 0 25px 50%
        }

        .bunny__foot--left {
            transform: rotate(10deg) skewY(-20deg)
        }

        .bunny__foot--right {
            transform: translateX(110px) rotate(10deg) skewY(-20deg)
        }

@keyframes tailAnim {
            0%,15%,25%,75%,85%,95% {
                transform: translate(190px,200px) rotate(8deg)
            }

            20%,80%,90% {
                transform: translate(190px,198px) rotate(-8deg)
            }}

        .bunny__tail {
            height: 50px;
            width: 40px;
            background: var(--bunny-color-2);
            border-radius: 50% 50% 50%;
            transform: translate(190px,200px) rotate(8deg);
            animation: tailAnim 3s linear infinite
        }

        .bunny__arm {
            width: 80px;
            height: 100px;
            transform: translate(-70px,140px)
        }

@keyframes pawAnim {
            0%,75%,100% {
                transform: translate(-47px,197px) rotate(-2deg)
            }

            65% {
                transform: translate(-47px,197px) rotate(10deg)
            }}

        .bunny__paw {
            width: 50px;
            height: 50px;
            background: var(--bunny-color);
            border-radius: 50px 0 0 50px;
            transform-origin: bottom right;
            transform: translate(-47px,197px) rotate(-2deg);
            transform: translate(-47px,197px) rotate(10deg);
            animation: pawAnim var(--breathe-duration) linear infinite
        }

        .bunny__paw::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 45px;
            border-radius: 0 0 20px 20px;
            background: var(--stick-color);
            transform: translate(8px,-5px)
        }

        .bunny__pa.........完整代码请登录后点击上方下载按钮下载查看