css+svg实现漂浮的机器人效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+svg实现漂浮的机器人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html, body {
            height: 100%;
        }

        body {
            background: #2a88c5;
            position: relative;
        }

        #robot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            max-width: 50vw;
            max-height: 80vh;
            margin: 0 auto;
        }

        #body {
            -webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
            animation: hover 1.1s ease-in-out 0s infinite alternate;
        }

        #head {
            -webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
            animation: hover 1.1s ease-in-out 0.05s infinite alternate;
        }

        #arms {
            -webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
            animation: hover 1.1s ease-in-out 0.1s infinite alternate;
        }

        #left_arm {
            transform-origin: center right;
            -webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
            animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
        }

        #right_arm {
            transform-origin: center left;
            -webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
            animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
        }

        #eyes ellipse {
            transform-origin: center center;
            -webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
            animation: eyes_blink 2s ease-out 0s infinite alternate;
        }

        #shadow {
            transform-origin: center center;
            -webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
            animation: shadow 1.1s ease-in-out 0s infinite alternate;
        }

@-webkit-keyframes hover {
            0% {
                transform: translate3d(0, 80px, 0);
            }
            100% {
                transform: translate3d(0, 30px, 0);
            }
        }

@keyframes hover {
            0% {
                transform: translate3d(0, 80px, 0);
            }
            100% {
                transform: translate3d(0, 30px, 0);
            }
        }
@-webkit-keyframes shadow {
            0% {
                transform: translate3d(0, 0, 0) scale(1.5, 1.2);
                opacity: 0.4;
            }
            100% {
                transform: translate3d(0, 0, 0) scale(1, 1);
                opacity: 0.2;
            }
        }
@keyframes shadow {
            0% {
                transform: translate3d(0, 0, 0) scale(1.5, 1.2);
                opacity: 0.4;
            }
            100% {
                transform: translate3d(0, 0, 0) scale(1, 1);
                opacity: 0.2;
            }
        }
@-webkit-keyframes arms_bounce_left {
            0% {
                transform: translate3d(0, 80px, 0) rotate(0deg);
            }
            100% {
                transform: translate3d(0, 30px, 0) rotate(-10deg);
            }
        }
@keyframes arms_bounce_left {
            0% {
                transform: translate3d(0, 80px, 0) rotate(0deg);
            }
            100% {
                transform: translate3d(0, 30px, 0) rotate(-10deg);
            }
        }
@-webkit-keyframes arms_bounce_right {
            0% {
                transform: translate3d(0, 80px, 0) rotate(0deg);
            }
            100% {
                transform: translate3d(0, 30px, 0) rotate(10deg);
            }
        }
@keyframes arms_bounce_right {
            0% {
                transform: translate3d(0, 80px, 0) rotate(0deg);
            }
            100% {
                transform: translate3d(0, 30px, 0) rotate(10deg);
            }
        }
@-webkit-keyframes eyes_blink {
            0% {
                transform: scale(1, 1);
            }
            90% {
                transform: scale(1, 1);
            }
            95% {
                transform: scale(0.8, 0);
            }
            100% {
                transform: scale(1, 1);
            }
        }
@keyframes eyes_blink {
            0% {
                transform: scale(1, 1);
            }
            90% {
                transform: scale(1, 1);
            }
            95% {
                transform: scale(0.8, 0);
            }
            100% {
                transform: scale(1, 1);
            }
        }
    </style>


</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
        <ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6" />
        <g id="left_arm">
            <path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z" />
            <path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z" />
        </g>
        <g id="right_arm">
            <path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
            <path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
            <path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z" />
            <path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z" />
        </g>
        <g id="robot_main">
            <g id="body">
                <path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.........完整代码请登录后点击上方下载按钮下载查看