HTML&CSS ：惊爆！会跳舞的机器人

前端Hardy2025-02-20 15:24

这段代码通过复杂的HTML结构和CSS样式，实现了一个动态的机器人效果，包含行走、眨眼和嘴巴动作。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        #bender-body {
            margin: 0 auto;
            height: 450px;
            width: 100px;
            position: relative
        }

        #text {
            margin-top: -150px;
            margin-left: -120px;
            width: 120px;
            top: 50%;
            left: 50%;
            text-transform: uppercase;
            color: #BE3E1B;
            font-size: 100%;
            font-weight: 700;
            text-shadow: -1px 1px 3px #DBC558, -1px 1px 1px #FFF38F;
            text-align: center
        }

        div {
            position: absolute;
            -webkit-transform-style: preserve-3d
        }

        #bender-body #page {
            height: 100%;
            width: 100%;
            -moz-perspective: 700px;
            background-image: -moz-linear-gradient(left, #547489 0%, #85a0b1 50%, #547489 100%)
        }

        #container {
            height: 300px;
            width: 300px;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            -webkit-box-reflect: below -7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, transparent), to(rgba(255, 255, 255, 0.2)))
        }

        .foot {
            bottom: 0;
            width: 32px;
            height: 20px
        }

        .foot-left {
            left: 90px;
            -webkit-animation: foot1 6s ease-in-out infinite;
            -moz-animation: foot1 10s ease-in-out infinite
        }

        .foot-right {
            right: 90px;
            -webkit-animation: foot2 6s ease-in-out infinite;
            -moz-animation: foot2 10s ease-in-out infinite
        }

        .leg1 {
            height: 20px;
            width: 12px;
            background: #FF0;
            bottom: 20%;
            -webkit-animation: leg1 6s ease-in-out infinite;
            -moz-animation: leg1 6s ease-in-out infinite;
            background: #7AA6C1;
            border: 1px solid #000;
            border-radius: 5px;
            z-index: 3
        }

        .first {
            left: 10px
        }

        .next1 {
            left: -1px
        }

        .next2 {
            right: -1px
        }

        .leg2 {
            height: 20px;
            width: 12px;
            background: #7AA6C1;
            border: 1px solid #000;
            bottom: 20%;
            z-index: 3;
            border-radius: 5px;
            -webkit-animation: leg2 6s ease-in-out infinite;
            -moz-animation: leg2 6s ease-in-out infinite
        }

        @-webkit-keyframes leg1 {
            from {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            05% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            10% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            15% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            20% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            25% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            30% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            35% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            40% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            45% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            50% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            55% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            60% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            65% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            70% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            80% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            90% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            to {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }
        }

        @-moz-keyframes leg1 {
            from {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            05% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            10% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            15% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            20% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            25% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            30% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            35% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            40% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            45% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            50% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            55% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            60% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            65% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            70% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            80% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            90% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            to {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }
        }

        @-webkit-keyframes leg2 {
            from {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            05% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            10% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            15% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            20% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            25% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            30% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            40% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            45% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            50% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            55% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            60% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            65% {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }

            70% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            80% {
                -webkit-transform: rotateZ(-10deg) translateY(-50%)
            }

            90% {
                -webkit-transform: rotateZ(10deg) translateY(-50%)
            }

            to {
                -webkit-transform: rotateZ(0deg) translateY(-50%)
            }
        }

        @-moz-keyframes leg2 {
            from {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            05% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            10% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            15% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            20% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            25% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            30% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            40% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            45% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            50% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            55% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            60% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            65% {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }

            70% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            80% {
                -moz-transform: rotateZ(-10deg) translateY(-50%)
            }

            90% {
                -moz-transform: rotateZ(10deg) translateY(-50%)
            }

            to {
                -moz-transform: rotateZ(0deg) translateY(-50%)
            }
        }

        @-webkit-keyframes foot1 {
            from {
                left: 116px
            }

            05% {
                left: 80px
            }

            10% {
                left: 116px
            }

            15% {
                left: 80px
            }

            20% {
                left: 116px
            }

            25% {
                left: 116px
            }

            30% {
                left: 116px
            }

            35% {
                left: 84px
            }

            40% {
                left: 116px
            }

            45% {
                left: 116px
            }

            50% {
                left: 84px
            }

            55% {
                left: 116px
            }

            60% {
                left: 84px
            }

            65% {
                left: 116px
            }

            to {
                left: 116px
            }
        }

        @-moz-keyframes foot1 {
            from {
                left: 116px
            }

            05% {
                left: 80px
            }

            10% {
                left: 116px
            }

            15% {
                left: 80px
            }

            20% {
                left: 116px
            }

            25% {
                left: 116px
            }

            30% {
                left: 116px
            }

            35% {
                left: 84px
            }

            40% {
                left: 116px
            }

            45% {
                left: 116px
            }

            50% {
                left: 84px
            }

            55% {
                left: 116px
            }

            60% {
                left: 84px
            }

            65% {
                left: 116px
            }

            to {
                left: 116px
            }
        }

        @-webkit-keyframes foot2 {
            from {
                right: 116px
            }

            05% {
                right: 80px
            }

            10% {
                right: 116px
            }

            15% {
                right: 80px
            }

            20% {
                right: 116px
            }

            25% {
                right: 84px
            }

            30% {
                right: 116px
            }

            40% {
                right: 116px
            }

            45% {
                right: 84px
            }

            50% {
                right: 116px
            }

            55% {
                right: 84px
            }

            60% {
                right: 116px
            }

            to {
                right: 116px
            }
        }

        @-moz-keyframes foot2 {
            from {
                right: 116px
            }

            05% {
                right: 80px
            }

            10% {
                right: 116px
            }

            15% {
                right: 80px
            }

            20% {
                right: 116px
            }

            25% {
                right: 84px
            }

            30% {
                right: 116px
            }

            40% {
                right: 116px
            }

            45% {
                right: 84px
            }

            50% {
                right: 116px
            }

            55% {
                right: 84px
            }

            60% {
                right: 116px
            }

            to {
                right: 116px
            }
        }

        #b-body {
            height: 66px;
            width: 56px;
            background: #A7C6DB;
            left: 120px;
            top: 140px;
            z-index: 10;
            -webkit-animation: body 6s ease-in-out infinite;
            -moz-animation: body 6s ease-in-out infinite;
            -webkit-perspective: 300
        }

        #b-body:before,
        #b-body:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            bottom: 0;
            z-index: -1;
            background-color: #A7C6DB
        }

        #b-body:before {
            -webkit-transform: skew(-5deg);
            -moz-transform: skew(-5deg);
            left: 5px;
            border-right: 1px solid #000
        }

        #b-body:after {
            -webkit-transform: skew(5deg);
            -moz-transform: skew(5deg);
            left: -5px;
            border-left: 1px solid #000
        }

        @-webkit-keyframes body {
            from {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            05% {
                top: 150px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            10% {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            15% {
                top: 150px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            20% {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            25% {
                top: 148px;
                left: 118px;
                -webkit-transform: rotateZ(0deg)
            }

            30% {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            35% {
                top: 148px;
                left: 126px;
                -webkit-transform: rotateZ(0deg)
            }

            40% {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            45% {
                top: 148px;
                left: 118px;
                -webkit-transform: rotateZ(0deg)
            }

            50% {
                top: 148px;
                left: 126px;
                -webkit-transform: rotateZ(0deg)
            }

            55% {
                top: 148px;
                left: 118px;
                -webkit-transform: rotateZ(0deg)
            }

            60% {
                top: 148px;
                left: 126px;
                -webkit-transform: rotateZ(0deg)
            }

            65% {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }

            70% {
                top: 142px;
                left: 129px;
                -webkit-transform: rotateZ(10deg) translateX(75%)
            }

            80% {
                top: 142px;
                left: 115px;
                -webkit-transform: rotateZ(-10deg) translateX(-75%)
            }

            90% {
                top: 142px;
                left: 129px;
                -webkit-transform: rotateZ(10deg) translateX(75%)
            }

            to {
                top: 135px;
                left: 122px;
                -webkit-transform: rotateZ(0deg)
            }
        }

        @-moz-keyframes body {
            from {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            05% {
                top: 150px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            10% {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            15% {
                top: 150px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            20% {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            25% {
                top: 148px;
                left: 118px;
                -moz-transform: rotateZ(0deg)
            }

            30% {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            35% {
                top: 148px;
                left: 126px;
                -moz-transform: rotateZ(0deg)
            }

            40% {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            45% {
                top: 148px;
                left: 118px;
                -moz-transform: rotateZ(0deg)
            }

            50% {
                top: 148px;
                left: 126px;
                -moz-transform: rotateZ(0deg)
            }

            55% {
                top: 148px;
                left: 118px;
                -moz-transform: rotateZ(0deg)
            }

            60% {
                top: 148px;
                left: 126px;
                -moz-transform: rotateZ(0deg)
            }

            65% {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }

            70% {
                top: 142px;
                left: 129px;
                -moz-transform: rotateZ(10deg) translateX(75%)
            }

            80% {
                top: 142px;
                left: 115px;
                -moz-transform: rotateZ(-10deg) translateX(-75%)
            }

            90% {
                top: 142px;
                left: 129px;
                -moz-transform: rotateZ(10deg) translateX(75%)
            }

            to {
                top: 135px;
                left: 122px;
                -moz-transform: rotateZ(0deg)
            }
        }

        .f1 {
            bottom: 5px;
            height: 15px;
            width: 100%;
            border: 1px solid #000;
            border-bottom: none;
            background: #A7C6DB;
            border-radius: 150px 150px 0 0;
            z-index: 2
        }

        .f2 {
            height: 10px;
            width: 100%;
            border: 1px solid #000;
            background: #A7C6DB;
            bottom: 0;
            border-radius: 100%;
            z-index: 1
        }

        #b1 {
            width: 102%;
            height: 14px;
            left: -1px;
            background-color: #A7C6DB;
            border: 1px solid #000;
            bottom: -8px;
            z-index: -2;
            border-radius: 100%
        }

        #b2 {
            width: 60%;
            bottom: 100%;
            height: 28%;
            left: 20%;
            background-color: #C8DFED;
            z-index: 2
        }

        #b2:before,
        #b2:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            bottom: 0;
            z-index: -1;
            background-color: #C9E0EE
        }

        #b2:before {
            -webkit-transform: skew(45deg);
            -moz-transform: skew(45deg);
            left: 11px;
            border-right: 1px solid #000
        }

        #b2:after {
            -webkit-transform: skew(-45deg);
            -moz-transform: skew(-45deg);
            left: -10px;
            border-left: 1px solid #000
        }

        #b3 {
            background-color: #C8DFED;
            border: 1px solid #000;
            border-radius: 100%;
            width: 124%;
            left: -13%;
            height: 12px;
            z-index: 1;
            top: -6px
        }

        #head {
            width: 36px;
            height: 40px;
            top: -56px;
            left: 9px;
            z-index: 5
        }

        #h2 {
            width: 100%;
            height: 8px;
            bottom: -4px;
            left: 1px;
            background: #A7C6DB;
            border: 1px solid #000;
            border-radius: 100%;
            z-index: 0
        }

        #h1 {
            width: 100%;
            height: 46px;
            bottom: 0;
            left: 1px;
            background: #A7C6DB;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            z-index: 1
        }

        #h3 {
            width: 100%;
            height: 38px;
            bottom: 62%;
            left: 1px;
            background: #A7C6DB;
            border: 1px solid #000;
            border-radius: 100%;
            z-index: 0
        }

        #h4 {
            height: 10px;
            width: 12px;
            bottom: 56px;
            border: 1px solid #000;
            background: #C4E0EE;
            z-index: -1;
            border-radius: 100%;
            left: 13px
        }

        #h5 {
            bottom: 64px;
            background: #76A3C4;
            border: 1px solid #000;
            width: 2px;
            height: 20px;
            left: 18px;
            z-index: -2;
            -webkit-animation: h5 4s ease-in-out infinite;
            -moz-animation: h5 4s ease-in-out infinite
        }

        @-webkit-keyframes h5 {
            from {
                bottom: 64px
            }

            25% {
                bottom: 45px
            }

            50% {
                bottom: 64px
            }

            60% {
                bottom: 58px
            }

            70% {
                bottom: 64px
            }

            to {
                bottom: 64px
            }
        }

        @-moz-keyframes h5 {
            from {
                bottom: 64px
            }

            25% {
                bottom: 45px
            }

            50% {
                bottom: 64px
            }

            60% {
                bottom: 58px
            }

            70% {
                bottom: 64px
            }

            to {
                bottom: 64px
            }
        }

        #h5 span {
            position: absolute;
            left: -3px;
            top: -5px;
            height: 6px;
            width: 6px;
            background: #CEE9FA;
            border: 1px solid #000;
            border-radius: 100%
        }

        #eyes {
            width: 49px;
            height: 22px;
            background: #CAE1F1;
            border: 1px solid #000;
            border-radius: 10px;
            z-index: 5;
            left: -5px;
            top: -4px
        }

        #e {
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background: #231F20;
            border-radius: 10px;
            overflow: hidden
        }

        #e1 {
            height: 14px;
            width: 16px;
            background: #FFF;
            border-radius: 100%;
            top: 2px;
            left: 4px
        }

        #e2 {
            height: 14px;
            width: 16px;
            background: #FFF;
            border-radius: 100%;
            top: 2px;
            right: 4px
        }

        .eye {
            height: 4px;
            width: 4px;
            border-radius: 100%;
            background: #231F20;
            top: 5px;
            left: 2px;
            -webkit-animation: eye 5s ease-in-out infinite;
            -moz-animation: eye 8s ease-in-out infinite
        }

        @-webkit-keyframes eye {
            from {
                top: 5px;
                left: 2px
            }

            10% {
                top: 5px;
                left: 10px
            }

            20% {
                top: 5px;
                left: 2px
            }

            30% {
                top: 5px;
                left: 2px
            }

            40% {
                top: 9px;
                left: 9px
            }

            45% {
                top: 5px;
                left: 6px
            }

            60% {
                top: 5px;
                left: 6px
            }

            70% {
                top: 3px;
                left: 2px
            }

            80% {
                top: 8px;
                left: 2px
            }

            90% {
                top: 7px;
                left: 10px
            }

            to {
                top: 5px;
                left: 2px
            }
        }

        @-moz-keyframes eye {
            from {
                top: 5px;
                left: 2px
            }

            10% {
                top: 5px;
                left: 10px
            }

            20% {
                top: 5px;
                left: 2px
            }

            30% {
                top: 5px;
                left: 2px
            }

            40% {
                top: 9px;
                left: 9px
            }

            45% {
                top: 5px;
                left: 6px
            }

            60% {
                top: 5px;
                left: 6px
            }

            70% {
                top: 3px;
                left: 2px
            }

            80% {
                top: 8px;
                left: 2px
            }

            90% {
                top: 7px;
                left: 10px
            }
        }

        #e1 span {
            position: absolute;
            width: 100%;
            height: 4px;
            background: #231F20;
            -webkit-animation: eye1 8s ease-in-out infinite;
            -moz-animation: eye1 8s ease-in-out infinite
        }

        @-webkit-keyframes eye1 {
            from {
                height: 1px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }

            10% {
                height: 4px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }

            20% {
                height: 2px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            30% {
                height: 5px;
                -webkit-transform: rotateZ(30deg);
                left: 5px;
                top: -1px
            }

            40% {
                height: 7px;
                -webkit-transform: rotateZ(30deg);
                left: 5px;
                top: -1px
            }

            50% {
                height: 4px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            70% {
                height: 0;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            80% {
                height: 8px;
                -webkit-transform: rotateZ(30deg);
                left: 5px;
                top: -2px
            }

            90% {
                height: 5px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            to {
                height: 1px;
                -webkit-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }
        }

        @-moz-keyframes eye1 {
            from {
                height: 1px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }

            10% {
                height: 4px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }

            20% {
                height: 2px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            30% {
                height: 5px;
                -moz-transform: rotateZ(30deg);
                left: 5px;
                top: -1px
            }

            40% {
                height: 7px;
                -moz-transform: rotateZ(30deg);
                left: 5px;
                top: -1px
            }

            50% {
                height: 4px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            70% {
                height: 0;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            80% {
                height: 8px;
                -moz-transform: rotateZ(30deg);
                left: 5px;
                top: -2px
            }

            90% {
                height: 5px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: -1px
            }

            to {
                height: 1px;
                -moz-transform: rotateZ(0deg);
                left: 0;
                top: 0
            }
        }

        #e2 span {
            position: absolute;
            width: 100%;
            height: 4px;
            background: #231F20;
            -webkit-animation: eye2 8s ease-in-out infinite;
            -moz-animation: eye2 8s ease-in-out infinite
        }

        @-webkit-keyframes eye2 {
            from {
                height: 1px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }

            10% {
                height: 4px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }

            20% {
                height: 2px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            30% {
                height: 5px;
                -webkit-transform: rotateZ(-30deg);
                right: 5px;
                top: -1px
            }

            40% {
                height: 7px;
                -webkit-transform: rotateZ(-30deg);
                right: 5px;
                top: -1px
            }

            50% {
                height: 4px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            70% {
                height: 0;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            80% {
                height: 8px;
                -webkit-transform: rotateZ(-30deg);
                right: 5px;
                top: -2px
            }

            90% {
                height: 5px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            to {
                height: 1px;
                -webkit-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }
        }

        @-moz-keyframes eye2 {
            from {
                height: 1px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }

            10% {
                height: 4px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }

            20% {
                height: 2px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            30% {
                height: 5px;
                -moz-transform: rotateZ(-30deg);
                right: 5px;
                top: -1px
            }

            40% {
                height: 7px;
                -moz-transform: rotateZ(-30deg);
                right: 5px;
                top: -1px
            }

            50% {
                height: 4px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            70% {
                height: 0;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            80% {
                height: 8px;
                -moz-transform: rotateZ(-30deg);
                right: 5px;
                top: -2px
            }

            90% {
                height: 5px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: -1px
            }

            to {
                height: 1px;
                -moz-transform: rotateZ(0deg);
                right: 0;
                top: 0
            }
        }

        #mouth {
            top: 23px;
            left: 3px;
            height: 14px;
            width: 32px;
            background: #FFF;
            border: 1px solid #000;
            z-index: 5;
            border-radius: 7px;
            overflow: hidden
        }

        #mouth span {
            display: block;
            float: left;
            width: 1px;
            height: 14px;
            background: #150B13;
            margin-left: 5px
        }

        #mouth span:first-child {
            margin-left: 3px
        }

        #m1 {
            top: 9px;
            width: 100%;
            height: 20px;
            border-top: 1px solid #000;
            border-radius: 100%;
            -webkit-animation: m1 4s ease-in-out infinite;
            -moz-animation: m1 4s ease-in-out infinite
        }

        @-webkit-keyframes m1 {
            from {
                border-radius: 0;
                width: 100%;
                left: 0
            }

            25% {
                border-radius: 40%;
                width: 200%;
                left: 0
            }

            50% {
                border-radius: 0;
                width: 100%;
                left: 0
            }

            75% {
                border-radius: 100%;
                width: 200%;
                left: -50%
            }

            to {
                border-radius: 0;
                width: 100%;
                left: 0
            }
        }

        @-moz-keyframes m1 {
            from {
                border-radius: 0;
                width: 100%;
                left: 0
            }

            25% {
                border-radius: 40%;
                width: 200%;
                left: 0
            }

            50% {
                border-radius: 0;
                width: 100%;
                left: 0
            }

            75% {
                border-radius: 100%;
                width: 200%;
                left: -50%
            }

            to {
                border-radius: 0;
                width: 100%;
                left: 0
            }
        }

        #m2 {
            bottom: 8px;
            width: 100%;
            height: 20px;
            border-bottom: 1px solid #000;
            border-radius: 100%;
            -webkit-animation: m1 4s ease-in-out infinite;
            -moz-animation: m1 4s ease-in-out infinite
        }

        #b4 {
            height: 20px;
            width: 10px;
            background: #AAC6DE;
            border: 1px solid #000;
            border-radius: 100%;
            left: -12px;
            top: 2px;
            z-index: -5
        }

        #ab {
            right: 50%;
            top: -5px;
            height: 20px;
            width: 14px
        }

        #ab .a1 {
            right: 2px;
            background: #A7C6DB;
            border: 1px solid #000;
            height: 20px;
            width: 8px;
            border-radius: 0 50px 50px 0;
            z-index: 1;
            border-left: none
        }

        #ab #a2 {
            right: 8px;
            background: #A7C6DB;
            border: 1px solid #000;
            height: 20px;
            width: 4px;
            border-radius: 100%;
            z-index: 0
        }

        #ab .a3 {
            height: 4px;
            width: 14px;
            background: #A7C6DB;
            border: 1px solid #000;
            z-index: -1;
            border-radius: 5px
        }

        #ab .a31 {
            right: 5px;
            top: 1px;
            -webkit-transform: rotateZ(20deg)
        }

        #ab .a32 {
            right: 6px;
            top: 8px
        }

        #ab .a33 {
            right: 5px;
            top: 15px;
            -webkit-transform: rotateZ(-20deg)
        }

        #b6 {
            height: 20px;
            width: 10px;
            background: #AAC6DE;
            border: 1px solid #000;
            border-radius: 100%;
            right: -12px;
            top: 2px;
            z-index: -5
        }

        #b5 {
            height: 10px;
            width: 16px;
            background: #82A6BC;
            border: 1px solid #000;
            left: -16px;
            top: 8px;
            z-index: -7;
            -webkit-transform: rotateZ(-60deg) translateX(-50%);
            -webkit-animation: b5 6s ease-in-out infinite;
            -moz-animation: b5 6s ease-in-out infinite
        }

        .b51 {
            height: 10px;
            width: 18px;
            background: #82A6BC;
            border: 1px solid #000;
            border-radius: 5px;
            right: 20%;
            top: -1px;
            z-index: 1;
            -webkit-transform: rotateZ(-10deg) translateX(-50%);
            -webkit-animation: b51 6s ease-in-out infinite;
            -moz-animation: b51 6s ease-in-out infinite
        }

        @-webkit-keyframes b5 {
            from {
                -webkit-transform: rotateZ(-60deg) translateX(-50%)
            }

            10% {
                -webkit-transform: rotateZ(50deg) translateX(-50%)
            }

            20% {
                -webkit-transform: rotateZ(50deg) translateX(-50%)
            }

            30% {
                -webkit-transform: rotateZ(50deg) translateX(-50%)
            }

            40% {
                -webkit-transform: rotateZ(-50deg) translateX(-50%)
            }

            50% {
                -webkit-transform: rotateZ(60deg) translateX(-50%)
            }

            60% {
                -webkit-transform: rotateZ(-60deg) translateX(-50%)
            }

            70% {
                -webkit-transform: rotateZ(30deg) translateX(-50%)
            }

            80% {
                -webkit-transform: rotateZ(-60deg) translateX(-50%)
            }

            90% {
                -webkit-transform: rotateZ(70deg) translateX(-50%)
            }

            to {
                -webkit-transform: rotateZ(-60deg) translateX(-50%)
            }
        }

        @-moz-keyframes b5 {
            from {
                -moz-transform: rotateZ(-60deg) translateX(-50%)
            }

            10% {
                -moz-transform: rotateZ(50deg) translateX(-50%)
            }

            20% {
                -moz-transform: rotateZ(50deg) translateX(-50%)
            }

            30% {
                -moz-transform: rotateZ(50deg) translateX(-50%)
            }

            40% {
                -moz-transform: rotateZ(-50deg) translateX(-50%)
            }

            50% {
                -moz-transform: rotateZ(60deg) translateX(-50%)
            }

            60% {
                -moz-transform: rotateZ(-60deg) translateX(-50%)
            }

            70% {
                -moz-transform: rotateZ(30deg) translateX(-50%)
            }

            80% {
                -moz-transform: rotateZ(-60deg) translateX(-50%)
            }

            90% {
                -moz-transform: rotateZ(70deg) translateX(-50%)
            }

            to {
                -moz-transform: rotateZ(-60deg) translateX(-50%)
            }
        }

        @-webkit-keyframes b51 {
            from {
                -webkit-transform: rotateZ(-10deg) translateX(-50%)
            }

            10% {
                -webkit-transform: rotateZ(10deg) translateX(-50%)
            }

            15% {
                -webkit-transform: rotateZ(0deg) translateX(-50%)
            }

            20% {
                -webkit-transform: rotateZ(10deg) translateX(-50%)
            }

            25% {
                -webkit-transform: rotateZ(0deg) translateX(-50%)
            }

            30% {
                -webkit-transform: rotateZ(10deg) translateX(-50%)
            }

            40% {
                -webkit-transform: rotateZ(-10deg) translateX(-50%)
            }

            50% {
                -webkit-transform: rotateZ(10deg) translateX(-50%)
            }

            60% {
                -webkit-transform: rotateZ(-5deg) translateX(-50%)
            }

            70% {
                -webkit-transform: rotateZ(10deg) translateX(-50%)
            }

            80% {
                -webkit-transform: rotateZ(-10deg) translateX(-50%)
            }

            90% {
                -webkit-transform: rotateZ(5deg) translateX(-50%)
            }

            to {
                -webkit-transform: rotateZ(-10deg) translateX(-50%)
            }
        }

        @-moz-keyframes b51 {
            from {
                -moz-transform: rotateZ(-10deg) translateX(-50%)
            }

            10% {
                -moz-transform: rotateZ(10deg) translateX(-50%)
            }

            15% {
                -moz-transform: rotateZ(0deg) translateX(-50%)
            }

            20% {
                -moz-transform: rotateZ(10deg) translateX(-50%)
            }

            25% {
                -moz-transform: rotateZ(0deg) translateX(-50%)
            }

            30% {
                -moz-transform: rotateZ(10deg) translateX(-50%)
            }

            40% {
                -moz-transform: rotateZ(-10deg) translateX(-50%)
            }

            50% {
                -moz-transform: rotateZ(10deg) translateX(-50%)
            }

            60% {
                -moz-transform: rotateZ(-5deg) translateX(-50%)
            }

            70% {
                -moz-transform: rotateZ(10deg) translateX(-50%)
            }

            80% {
                -moz-transform: rotateZ(-10deg) translateX(-50%)
            }

            90% {
                -moz-transform: rotateZ(5deg) translateX(-50%)
            }

            to {
                -moz-transform: rotateZ(-10deg) translateX(-50%)
            }
        }

        @-webkit-keyframes b7 {
            from {
                -webkit-transform: rotateZ(60deg) translateX(50%)
            }

            30% {
                -webkit-transform: rotateZ(60deg) translateX(50%)
            }

            40% {
                -webkit-transform: rotateZ(-60deg) translateX(50%)
            }

            50% {
                -webkit-transform: rotateZ(-60deg) translateX(50%)
            }

            60% {
                -webkit-transform: rotateZ(60deg) translateX(50%)
            }

            70% {
                -webkit-transform: rotateZ(-30deg) translateX(50%)
            }

            80% {
                -webkit-transform: rotateZ(60deg) translateX(50%)
            }

            90% {
                -webkit-transform: rotateZ(-70deg) translateX(50%)
            }

            to {
                -webkit-transform: rotateZ(60deg) translateX(50%)
            }
        }

        @-moz-keyframes b7 {
            from {
                -moz-transform: rotateZ(60deg) translateX(50%)
            }

            30% {
                -moz-transform: rotateZ(60deg) translateX(50%)
            }

            40% {
                -moz-transform: rotateZ(-60deg) translateX(50%)
            }

            50% {
                -moz-transform: rotateZ(-60deg) translateX(50%)
            }

            60% {
                -moz-transform: rotateZ(60deg) translateX(50%)
            }

            70% {
                -moz-transform: rotateZ(-30deg) translateX(50%)
            }

            80% {
                -moz-transform: rotateZ(60deg) translateX(50%)
            }

            90% {
                -moz-transform: rotateZ(-70deg) translateX(50%)
            }

            to {
                -moz-transform: rotateZ(60deg) translateX(50%)
            }
        }

        @-webkit-keyframes b71 {
            from {
                -webkit-transform: rotateZ(10deg) translateX(50%)
            }

            10% {
                -webkit-transform: rotateZ(15deg) translateX(50%)
            }

            20% {
                -webkit-transform: rotateZ(5deg) translateX(50%)
            }

            30% {
                -webkit-transform: rotateZ(15deg) translateX(50%)
            }

            40% {
                -webkit-transform: rotateZ(-10deg) translateX(50%)
            }

            50% {
                -webkit-transform: rotateZ(-10deg) translateX(50%)
            }

            60% {
                -webkit-transform: rotateZ(5deg) translateX(50%)
            }

            70% {
                -webkit-transform: rotateZ(-10deg) translateX(50%)
            }

            80% {
                -webkit-transform: rotateZ(10deg) translateX(50%)
            }

            90% {
                -webkit-transform: rotateZ(-5deg) translateX(50%)
            }

            to {
                -webkit-transform: rotateZ(10deg) translateX(50%)
            }
        }

        @-moz-keyframes b71 {
            from {
                -moz-transform: rotateZ(10deg) translateX(50%)
            }

            10% {
                -moz-transform: rotateZ(15deg) translateX(50%)
            }

            20% {
                -moz-transform: rotateZ(5deg) translateX(50%)
            }

            30% {
                -moz-transform: rotateZ(15deg) translateX(50%)
            }

            40% {
                -moz-transform: rotateZ(-10deg) translateX(50%)
            }

            50% {
                -moz-transform: rotateZ(-10deg) translateX(50%)
            }

            60% {
                -moz-transform: rotateZ(5deg) translateX(50%)
            }

            70% {
                -moz-transform: rotateZ(-10deg) translateX(50%)
            }

            80% {
                -moz-transform: rotateZ(10deg) translateX(50%)
            }

            90% {
                -moz-transform: rotateZ(-5deg) translateX(50%)
            }

            to {
                -moz-transform: rotateZ(10deg) translateX(50%)
            }
        }

        #b7 {
            height: 10px;
            width: 16px;
            background: #82A6BC;
            border: 1px solid #000;
            right: -16px;
            top: 8px;
            z-index: -7;
            -webkit-transform: rotateZ(60deg) translateX(50%);
            -webkit-animation: b7 6s ease-in-out infinite;
            -moz-animation: b7 6s ease-in-out infinite
        }

        #b71,
        .b71 {
            height: 10px;
            width: 18px;
            background: #82A6BC;
            border: 1px solid #000;
            border-radius: 5px;
            left: 20%;
            top: -1px;
            z-index: 1;
            -webkit-transform: rotateZ(10deg) translateX(50%);
            -webkit-animation: b71 6s ease-in-out infinite;
            -moz-animation: b71 6s ease-in-out infinite
        }

        #ac {
            left: 50%;
            bottom: -4px;
            height: 20px;
            width: 14px
        }

        #ac .a1 {
            left: 2px;
            background: #A7C6DB;
            border: 1px solid #000;
            height: 20px;
            width: 8px;
            border-radius: 50px 0 0 50px;
            z-index: 1;
            border-right: none
        }

        #ac .a2 {
            left: 8px;
            background: #A7C6DB;
            border: 1px solid #000;
            height: 20px;
            width: 4px;
            border-radius: 100%;
            z-index: 0
        }

        #ac #a3,
        #ac .a3 {
            height: 4px;
            width: 14px;
            background: #A7C6DB;
            border: 1px solid #000;
            z-index: -1;
            border-radius: 5px
        }

        #ac .a31 {
            left: 5px;
            top: 1px;
            -webkit-transform: rotateZ(-20deg)
        }

        #ac .a32 {
            left: 6px;
            top: 8px
        }

        #ac .a33 {
            left: 5px;
            top: 15px;
            -webkit-transform: rotateZ(20deg)
        }

        #b8 {
            left: 10px;
            top: 14px;
            height: 46px;
            width: 36px;
            background: #A7C6DB;
            z-index: 2
        }

        #b8 span {
            top: 20px;
            right: 0;
            position: absolute;
            border: 1px solid #000;
            height: 4px;
            width: 4px;
            border-radius: 50%
        }

        #b8:before,
        #b8:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            bottom: 0;
            z-index: -1;
            background: #A7C6DB
        }

        #b8:before {
            -webkit-transform: skew(-5deg);
            -moz-transform: skew(-5deg);
            left: 2px;
            border: 1px solid #000;
            border-left: none
        }

        #b8:after {
            -webkit-transform: skew(5deg);
            -moz-transform: skew(5deg);
            left: -2px;
            border: 1px solid #000;
            border-right: none
        }
    </style>
</head>

<body>
    <div id="bender-body">
        <div id="page">
            <div id="container">
                <div class="foot-left foot">
                    <div class="f1"></div>
                    <div class="f2"></div>
                    <div class="first leg1">
                        <div class="next1 leg1">
                            <div class="next1 leg1">
                                <div class="next1 leg1">
                                    <div class="next1 leg1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="foot-right foot">
                    <div class="f1"></div>
                    <div class="f2"></div>
                    <div class="first leg2">
                        <div class="next2 leg2">
                            <div class="next2 leg2">
                                <div class="next2 leg2">
                                    <div class="next2 leg2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="b-body">
                    <div id="b1"></div>
                    <div id="b2"></div>
                    <div id="b3"></div>
                    <div id="head">
                        <div id="h1"></div>
                        <div id="h2"></div>
                        <div id="h3"></div>
                        <div id="h4"></div>
                        <div id="h5"><span></span></div>
                        <div id="eyes">
                            <div id="e">
                                <div id="e1">
                                    <div class="eye"></div><span></span>
                                </div>
                                <div id="e2">
                                    <div class="eye"></div><span></span>
                                </div>
                            </div>
                        </div>
                        <div id="mouth"> <span></span> <span></span> <span></span> <span></span> <span></span>
                            <div id="m1"></div>
                            <div id="m2"></div>
                        </div>
                    </div>
                    <div id="b4"></div>
                    <div id="b5">
                        <div class="b51">
                            <div class="b51">
                                <div class="b51">
                                    <div class="b51">
                                        <div id="ab">
                                            <div class="a1"></div>
                                            <div id="a2"></div>
                                            <div class="a31 a3"></div>
                                            <div class="a32 a3"></div>
                                            <div class="a33 a3"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="b6"></div>
                    <div id="b7">
                        <div class="b71">
                            <div class="b71">
                                <div class="b71">
                                    <div class="b71">
                                        <div id="ac">
                                            <div class="a1"></div>
                                            <div class="a2"></div>
                                            <div class="a31 a3"></div>
                                            <div class="a32 a3"></div>
                                            <div class="a3 a33"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="b8"> <span></span> </div>
                    <div id="b9"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

HTML 结构

  • bender-body：整个机器人的主体容器，用于布局。
  • page：包含机器人各个部件的容器。
  • container：用于定位和布局机器人的脚部和身体。
  • foot-left 和 foot-right：机器人的左右脚，包含脚部的装饰和腿部。
  • leg1 和 leg2：机器人的左右腿部，通过动画实现动态效果。
  • b-body：机器人的身体部分，包含头部和身体的装饰。
  • head：机器人的头部，包含眼睛、嘴巴和其他面部装饰。
  • eyes：机器人的双眼，包含动态效果。
  • mouth：机器人的嘴巴，包含动态效果。
  • b1、b2、b3、b4、b5、b6、b7、b8：机器人的身体各部分装饰。

CSS样式

  • #bender-body：设置容器的尺寸和居中布局。
  • #page：设置背景渐变和3D效果。
  • #container：定位机器人的脚部和身体，添加反射效果。
  • .foot：定义脚部的基本样式。
  • .foot-left 和 .foot-right：分别定义左脚和右脚的位置和动画。
  • .leg1 和 .leg2：定义腿部的样式和动画，模拟行走效果。
  • #b-body：定义身体的样式，包括背景颜色和动画。
  • #b1、#b2、#b3：定义身体的多层装饰，包括斜切效果。
  • #head：定义头部的样式，包括多层背景和装饰。
  • #h1、#h2、#h3、#h4、#h5：头部的装饰和动态效果。
  • #eyes：定义眼睛的样式，包含动态的瞳孔和眼睑效果。
  • #e1 和 #e2：左右眼睛的样式，包含动态的瞳孔。
  • #mouth：定义嘴巴的样式，包含动态的开口和闭合效果。
  • #b4、#b5、#b6、#b7、#b8：身体各部分的装饰，包含动态效果和斜切设计。
  • #ab 和 #ac：身体两侧的装饰，包含多层设计。
  • #b5 和 #b7：动态的腿部和手臂效果，通过动画模拟运动。
相关推荐
勘察加熊人2 小时前
c++生成html文件helloworld
开发语言·c++·html
beibeibeiooo9 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
计算机毕设定制辅导-无忧学长10 小时前
HTML 与 JavaScript 交互：学习进程中的新跨越（一）
javascript·html·交互
thinkQuadratic11 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
小鸭呱呱呱12 小时前
【CSS】- 表单控件的 placeholder 如何控制换行显示？
前端·javascript·css·深度学习·面试·职场和发展·html
噶琪14 小时前
理解《CSS世界》盒模型、流、布局
前端·css
the_one14 小时前
《Canvas 炫酷动态粒子连线：从零打造流动星空特效》
前端·javascript·css
剪刀石头布啊14 小时前
ECMAScript、html头、dom、bom、a空链、选择器、css样式继承等、css通用属性值、文档流等
css·html
日记成书15 小时前
【HTML 基础教程】HTML 表格
前端·html
木木黄木木15 小时前
HTML5贪吃蛇游戏开发经验分享
前端·html·html5
热门推荐
01【笔记】MJ Prompt02DeepSeek各版本说明与优缺点分析03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04uniApp使用XR-Frame创建3D场景(3)光源投影的运用。05RAG 实践- Ollama+RagFlow 部署本地知识库06如何在WPS和Word/Excel中直接使用DeepSeek功能07【通信中间件】Fdbus HelloWorld实例08苍穹外卖面试总结09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10HTML项目一键打包工具：HTML2EXE 最新版