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

css布局实现兔子吹泡泡动画效果代码

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