[分享]css做哆啦a梦

CSS（层叠样式表）是一种用于设计网页样式、布局和动画的技术，可以让网页变得更加美观和易于使用。今天我将向你展示如何使用 CSS 制作哆啦A梦动画。 / 定义哆啦A梦的身体部分 / .body { b...

CSS（层叠样式表）是一种用于设计网页样式、布局和动画的技术，可以让网页变得更加美观和易于使用。今天我将向你展示如何使用 CSS 制作哆啦A梦动画。

 /* 定义哆啦A梦的身体部分 */
    .body {
        background-color: blue;
        width: 200px;
        height: 150px;
        border-radius: 100px/75px;
        position: relative;
        margin: 100px auto 0;
    }

    /* 定义哆啦A梦的腹部 */
    .belly {
        background-color: white;
        width: 150px;
        height: 100px;
        border-radius: 0 0 75px 75px;
        position: absolute;
        top: 50px;
        left: 25px;
    }

    /* 定义哆啦A梦的头部 */
    .head {
        background-color: blue;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        position: absolute;
        top: -30px;
        left: 62.5px;
    }

    /* 定义哆啦A梦的眼睛 */
    .eye {
        background-color: white;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        position: absolute;
        top: 10px;
        left: 22.5px;
    }

    /* 定义哆啦A梦的鼻子 */
    .nose {
        background-color: pink;
        width: 15px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top: 25px;
        left: 32.5px;
    }

    /* 定义哆啦A梦的手 */
    .arm {
        background-color: blue;
        width: 50px;
        height: 100px;
        position: absolute;
        top: 70px;
    }

    /* 移动哆啦A梦的手 */
    .arm:nth-child(1) {
        left: -50px;
        transform: rotate(-45deg);
    }

    .arm:nth-child(2) {
        right: -50px;
        transform: rotate(45deg);
    }

    /* 向哆啦A梦添加动画 */
    .arm {
        animation: wave 2s ease infinite;
    }

    /* 定义哆啦A梦晃动手臂的动画 */
    @keyframes wave {
        0% {
            transform: rotate(-45deg);
        }
        50% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(45deg);
        }
    } 

通过组合以上 CSS 规则，你可以轻松制作一个可爱的哆啦A梦动画。你的页面可能还需要其他的 HTML 和 CSS 代码来确保网页的可访问性和可读性，但这里给出的代码已经能够让哆啦A梦动起来了。