html 与 css 画哆啦A梦

最新推荐文章于 2024-03-28 22:33:29 发布
小星落
最新推荐文章于 2024-03-28 22:33:29 发布
阅读量2.1k
点赞数 2
分类专栏： HTML css
原文链接：https://blog.csdn.net/GongWei_/article/details/112170567
版权
css 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
HTML
13 篇文章 0 订阅
订阅专栏
哆啦A梦
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>哆啦A梦</title>
    <style type="text/css">
        .big {
            width: 500px;
            height: 530px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .head {
            width: 300px;
            height: 300px;
            border-radius: 150px;
            border: 2px solid #333;
            background-image: -webkit-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);
            /* 放射性渐变 */
            background-image: -moz-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);
            background-image: -ms-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);
            box-shadow: -5px 5px 15px 2px #888;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }

        .face {
            width: 250px;
            height: 210px;
            border-radius: 175px;
            background-color: #fff;
            position: relative;
            left: 25px;
            top: 65px;
        }

        .left_eye {
            width: 60px;
            height: 70px;
            border-radius: 30px;
            border: 2px solid black;
            background-color: #fff;
            position: relative;
            top: -170px;
            left: 87px;
        }

        .left_eyeball {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background-color: black;
            position: relative;
            top: 10px;
            left: 40px;
            animation-name: cat;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-fill-mode: backwards;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .right_eye {
            width: 60px;
            height: 70px;
            border-radius: 30px;
            border: 2px solid black;
            background-color: #fff;
            position: relative;
            top: -242px;
            left: 149px;
        }

        .right_eyeball {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background-color: black;
            position: relative;
            top: 8px;
            left: 10px;
            animation-name: cat;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-fill-mode: backwards;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes cat {
            from {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(7px, 7px);
            }

            40% {
                transform: translate(0px, 14px);
            }

            60% {
                transform: translate(7px, 21px);
            }

            80% {
                transform: translate(0px, 28px);
            }

            to {
                transform: translate(7px, 35px);
            }
        }

        .nose {
            width: 28px;
            height: 28px;
            border-radius: 14px;
            border: 2px solid black;
            background-image: -webkit-radial-gradient(10px at 80% 40%, #fff, #cb3a00);
            position: relative;
            top: -254px;
            left: 133px;
        }

        .mouth {
            width: 1px;
            height: 100px;
            border: 1px solid black;
            background-color: black;
            position: relative;
            top: -458px;
            left: 147px;
        }

        .smile {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            border-bottom: 4px solid black;
            position: relative;
            left: 48px;
            top: -354px;
        }

        .gai {
            width: 200px;
            height: 65px;
            background-color: #fff;
            position: relative;
            top: 100px;
        }

        .beard {
            width: 70px;
            height: 1px;
            border: 0.3px solid black;
            background-color: black;
        }

        .lt {
            position: relative;
            top: -555px;
            left: 40px;
            transform: rotate(15deg);
        }

        .lm {
            position: relative;
            top: -535px;
            left: 40px;
        }

        .lb {
            position: relative;
            top: -515px;
            left: 40px;
            transform: rotate(-15deg);
        }

        .gt {
            position: relative;
            top: -564px;
            left: 185px;
            transform: rotate(-15deg);
        }

        .gm {
            position: relative;
            top: -544px;
            left: 185px;
        }

        .gb {
            position: relative;
            top: -524px;
            left: 185px;
            transform: rotate(15deg);
        }

        .body {
            width: 200px;
            height: 200px;
            background-color: #07abdd;
            border: 2px solid #333;
            position: relative;
            top: 290px;
            left: 148px;
            z-index: 10;
        }

        .tummy {
            width: 150px;
            height: 150px;
            border-radius: 75px;
            background-color: #fff;
            border: 2px solid #000;
            position: relative;
            left: 25px;
            top: -10px;
        }

        .pocket {
            width: 120px;
            height: 120px;
            border-radius: 60px;
            background-color: #fff;
            border: 2px solid #000;
            position: relative;
            left: 15px;
            top: 15px;
        }

        .gai_2 {
            width: 124px;
            height: 62px;
            background-color: #fff;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom: 2px solid black;
            position: relative;
            left: -2px;
            top: -2px;
        }

        .left_hand {
            width: 70px;
            height: 55px;
            background-color: #07abdd;
            border: 2px solid #333;
            position: relative;
            top: 120px;
            left: 98px;
            transform-origin: 0 50%;
            transform: rotate(-30deg);
            box-shadow: -5px 2px 10px 2px #333;
        }

        .right_hand {
            width: 70px;
            height: 55px;
            background-color: #07abdd;
            border: 2px solid #333;
            position: relative;
            top: 23px;
            left: 336px;
            transform-origin: 0 50%;
            transform: rotate(30deg);
            box-shadow: -5px 2px 10px 2px #333;
        }

        .left_palm {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            border: 2px solid #333;
            background-color: #fff;
            position: relative;
            left: 50px;
            top: 3px;
        }

        .right_palm {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            border: 2px solid #333;
            background-color: #fff;
            position: relative;
            left: 373px;
            top: -73px;
        }

        .rod {
            width: 210px;
            height: 25px;
            border-radius: 100px;
            border: 2px solid #000;
            background-image: linear-gradient(to top, #640C04, #B13206);
            position: relative;
            left: 143px;
            top: -200px;
            z-index: 20;
        }

        .gai_3 {
            width: 5px;
            height: 60px;
            background-color: #07abdd;
            position: relative;
            left: 148px;
            top: -215px;
            z-index: 15
        }

        .gai_4 {
            width: 5px;
            height: 60px;
            background-color: #07abdd;
            position: relative;
            left: 348px;
            top: -275px;
            z-index: 15;
        }

        .dang {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #fff;
            border: 2px solid #333;
            position: relative;
            left: 238px;
            top: -140px;
            z-index: 15;
        }

        .dang_gai {
            width: 24px;
            height: 10px;
            background-color: #fff;
            position: relative;
            top: 12px;
            left: -2px;
        }

        .left_foot {
            width: 110px;
            height: 30px;
            border: 2px solid #333;
            border-top-right-radius: 45px;
            border-bottom-right-radius: 45px;
            border-top-left-radius: 65px;
            border-bottom-left-radius: 45px;
            background-color: #fff;
            position: relative;
            left: 130px;
            top: -157px;
            z-index: 15;
            box-shadow: -1px 0px 10px 2px #333;
        }

        .right_foot {
            width: 110px;
            height: 30px;
            border: 2px solid #333;
            border-top-right-radius: 65px;
            border-bottom-right-radius: 45px;
            border-top-left-radius: 45px;
            border-bottom-left-radius: 45px;
            background-color: #fff;
            position: relative;
            left: 255px;
            top: -191px;
            z-index: 15;
            box-shadow: -1px 1px 10px 2px #333;
        }

        .bell {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-image: radial-gradient(10px at 75% 25%, #fff, #CDC60B);
            border: 2px solid #000;
            position: relative;
            left: 230px;
            top: -430px;
            z-index: 30;
        }

        .inbell_1 {
            width: 34px;
            height: 3px;
            border: 2px solid #000;
            border-top-left-radius: 3px;
            border-top-right-radius: 4px;
            background-color: none;
            position: relative;
            top: 9px;
            left: -1px;
        }

        .inbell_2 {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #000;
            position: relative;
            top: 13px;
            left: 12px;
        }

        .inbell_3 {
            width: 2px;
            height: 10px;
            background-color: #000;
            position: relative;
            left: 16px;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="head">
            <div class="face"></div>
            <div class="left_eye">
                <div class="left_eyeball"></div>
            </div>
            <div class="right_eye">
                <div class="right_eyeball"></div>
            </div>
            <div class="nose"></div>
            <div class="smile">
                <div class="gai"></div>
            </div>
            <div class="mouth"></div>
            <div class="beard lt"></div>
            <div class="beard lm"></div>
            <div class="beard lb"></div>
            <div class="beard gt"></div>
            <div class="beard gm"></div>
            <div class="beard gb"></div>
        </div>


        <div class="body">
            <div class="tummy">
                <div class="pocket">
                    <div class="gai_2">
                    </div>
                </div>
            </div>
        </div>


        <div class="left_hand"></div>
        <div class="right_hand"></div>

        <div class="left_palm"></div>
        <div class="right_palm"></div>

        <div class="rod"></div>


        <div class="gai_3"></div>
        <div class="gai_4"></div>

        <div class="dang">
            <div class="dang_gai"></div>
        </div>

        <div class="left_foot"></div>
        <div class="right_foot"></div>


        <div class="bell">
            <div class="inbell_1"></div>
            <div class="inbell_2"></div>
            <div class="inbell_3"></div>
        </div>

    </div>
</body>
小星落
关注
2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html 与 css 画哆啦A梦

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big { width: 500px; height: 530px; position: absolute; .
复制链接

扫一扫