CSS皮卡丘的制作

kingzlzd
于 2021-12-08 20:53:03 发布
阅读量177
点赞数
分类专栏： CSS
本文链接：https://blog.csdn.net/kingzlzd/article/details/121800912
版权
css html
CSS 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width:2000px;
            height:2000px;
            position:relative;
        }
        .head{
            width:560px;
            height:500px;
            background-color:#ffd700;
            border:5px solid black;
            border-radius:40%;
            position:relative;
            margin:300px auto;
            overflow: hidden;
        }
        .ear{
            width:80px;
            height:500px;
            background-color:#ffd700;
            border:5px solid black;
            border-radius:50%;
            z-index: -1;
            position: absolute;
            overflow: hidden;
        }
        .left{
            left:740px;
            top:-180px;
            transform: rotate(-45deg);
        }
        .right{
            left:1160px;
            top:-200px;
            transform: rotate(20deg);
        }
        .blackEar{
            width:80px;
            height:100px;
            background-color: black;
        }
        .eyel{
            width:100px;
            height:100px;
            background-color: black;
            border-radius:50%;
            position: absolute;
            top:200px;
            left:125px;
        }
        .eyer{
            width:100px;
            height:100px;
            background-color: black;
            border-radius:50%;
            position: absolute;
            top:200px;
            right:125px;
        }
        .seyel{
            width:45px;
            height:45px;
            background-color: white;
            border-radius:50%;
            position:absolute;
            left:40px;
            top:5px;
        }
        .seyer{
            width:45px;
            height:45px;
            background-color: white;
            border-radius:50%;
            position:absolute;
            right:40px;
            top:5px;
        }
        .facel{
            width:130px;
            height:130px;
            border-radius:50%;
            background-color:#fb1412;
            border:black 5px solid;
            position:absolute;
            top:300px;
            left:-40px;
        }
        .face2{
            width:130px;
            height:130px;
            border-radius:50%;
            background-color:#fb1412;
            border:black 5px solid;
            position:absolute;
            top:300px;
            right:-40px;
        }
        .nose{
            width:0;
            height:0;
            border-top:black 15px solid;
            border-left:solid 15px transparent;
            border-right:solid 15px transparent;
            border-bottom:solid 0 transparent;
            position: absolute;
            border-radius: 30%;
            top:300px;
            left:265px;
            z-index: 1;
        }
        .mouth{
            width: 150px;
            height: 150px;
            background-color:#ffd700;
            position: absolute;
            left:205px;
            top:310px;
            overflow: hidden;
        }
        .disc1{
            position: absolute;
            width:80px;
            height: 80px;
            background-color: black;
            border-radius: 50%;
            top:-40px;
        }
        .disc2{
            position: absolute;
            width:80px;
            height: 80px;
            background-color: black;
            border-radius: 50%;
            right:0px;
            top:-40px;
        }
        .disc3{
            position: absolute;
            width:80px;
            height: 70px;
            background-color:#ffd700;
            border-radius: 50%;
            top:0px;
            left:-1px;
        }
        .disc4{
            position: absolute;
            width:80px;
            height: 70px;
            background-color:#ffd700;
            border-radius: 50%;
            top:0px;
            right:-1px;
        }
        .disc5{
            position: absolute;
            width:80px;
            height: 70px;
            background-color:#ffd700;
            border-radius: 50%;
            top:-40px;
            left:-1px;
        }
        .tongue{
            width: 100px;
            height: 140px;
            position: absolute;
            background-color: #5c0009;
            left:20px;
            border-radius:0 0 70px 70px;
            border:solid black 5px;
            overflow: hidden;
        }
        .stongue{
            width: 100px;
            height: 100px;
            background-color: #e93c4e;
            position: absolute;
            bottom: 0px;
            border-radius:50px; 
            right:-5px;
            bottom:-20px;
            border:solid 5px black;
        }
    </style>
</head>
<body>
    <div class="pikaqiu">
        <div class="box">
            <!-- 耳朵 -->
            <div class="ear left">
                    <div class="blackEar"></div>
            </div>
            <div class="ear right">
                    <div class="blackEar"></div>
            </div>

            <!-- 头 -->
            <div class="head">
                <!-- 眼睛 -->
                <div class="eyel">
                    <div class="seyel"></div>
                </div>
                <div class="eyer">
                    <div class="seyer"></div>
                </div>
    
                <!-- 腮红 -->
                <div class="facel"></div>
                <div class="face2"></div>

                <!-- 鼻子 -->
                <div class="nose"></div>

                <!-- 嘴巴 -->
                <div class="mouth">
                    <!-- 舌头 -->
                    <div class="tongue">
                        <div class="stongue"></div>
                    </div>

                    <div class="disc1">
                        <div class="disc3"></div>
                    </div>
                    <div class="disc2">
                        <div class="disc4"></div>
                    </div>
                    <div class="disc5"></div>
                </div>

            </div>
        </div>
    </div>
        
</body>
</html>