html&css 机器猫的实现

最新推荐文章于 2022-06-27 21:36:00 发布

Kahan~

最新推荐文章于 2022-06-27 21:36:00 发布

阅读量847

点赞数 1

分类专栏： demo 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_44221176/article/details/104576650

版权

机器猫，效果图如下：

html代码：

<!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>哆啦A梦</title>
    <link rel="stylesheet" href="./css/demo.css">
</head>
<body>
    <div class="box">
        <!-- 头部 -->
        <header>
            <!-- 脸部 -->
            <div class="face">
                <!-- 左眼 -->
                <div class="eye1">
                    <!-- 左眼球 -->
                    <div class="eyeball"></div>
                </div>
                <!-- 右眼 -->
                <div class="eye2">
                    <!-- 右眼球 -->
                    <div class="eyeball"></div>
                </div>
                <!-- 鼻子 -->
                <div class="nose">
                    <div></div>
                </div>
                <!-- 胡须 -->
                <div class="beard beard1"></div>
                <div class="beard beard2"></div>
                <div class="beard beard3"></div>
                <div class="beard beard4"></div>
                <div class="beard beard5"></div>
                <div class="beard beard6"></div>
                <div class="nose2"></div>
                <!-- 嘴 -->
                <div class="mouth"></div>
            </div>
            
        </header>
        <!-- 手 -->
        <div class="left-hand"></div>
        <div class="right-hand"></div>
        <!-- 衣服 -->
        <div class="clothes">
            <div class="trouser"></div>
        </div>
        <!-- 口袋 -->
        <div class="pocket">
            <div class="pocket2"></div>
        </div>
        <!-- 衣领 -->
        <div class="collar"></div>
        <!-- 铃铛 -->
        <div class="bell">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!-- 手上的圆 -->
        <div class="finger_l"></div>
        <div class="finger_r"></div>
        <footer class="foot_l"></footer>
        <footer class="foot_r"></footer>
    </div>
</body>
</html>

css代码：

@charset "utf-8";
*{
   
    margin:0;
    padding:0;
}
.box{
   
    width:397px;
    height:498px;
    margin:0 auto;
    position: relative;
}
header{
   
    width:310px;
    height:310px;
    background:#0eabd4;
    border:2px solid #343331;
    border-radius:100% 100%;
    position: absolute;
    left:42px;
    top:11px;
    box-shadow:-27px 43px 36px -28px grey;
}
.face{
   
    width:264px;
    height:200px;
    border:2px solid #000;
    border-radius:132px / 100px;
    background:#fff;</

最低0.47元/天解锁文章

Kahan~

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html&css 机器猫的实现

新手小白写的机器猫，效果图如下：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫