【Html+Css】实现【大白机器人】练手小项目

Html+Css【大白机器人】练习小项目

先上效果图：在这里插入图片描述

主要技术栈：Html+Css（相对定位、绝对定位、平移、对称变换、旋转）

直接上代码：------------>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大白</title>
    <style>
        body{
            background-color: pink;
        }
        #dabai{
            margin: 0 auto;
            height: 600px;
            /* background-color: pink; */

        }
        #head{
            width: 100px;
            height: 60px;
            margin: 0 auto;
            background-color: white;
            border-radius: 50%;
            /* 设置下边框的阴影效果 */
            border-bottom: 5px solid gainsboro;
            /* 设置相对定位，以及元素的优先展示层级 */
            position: relative;
            z-index: 100;

        }
        #eye1,#eye2{
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            
            /* transform: rotate(8deg); */
        }
        #eye1{
            margin-top: 27px;
            margin-left: 25px;
        }
        #eye2{
            /* transform: rotate(-8deg); */
            margin-top: 27px;
            margin-left: 60px;
        }
        #mouth{
            width: 35px;
            height: 2px;
            background-color: black;
            position: absolute;
            top: 30px;
            left: 25px;
        }
        #torso,#belly{
            width: 190px;
            height: 200px;
            background-color: white;
            margin: 0 auto;
            border-radius: 50%;

            /* 设置边框 */
            border: 5px solid gainsboro;
            border-top: none;
            z-index: 1;
            /* 使头部粘在身体上 */
            margin-top: -10px;
        }
        #belly{
            height: 300px;
            width: 270px;
            margin-top: -110px;
            z-index: 5;
            background-color: white;
            border-top: none;
        }
        #contain{
            width: 188px;
            height: 180px;
            background-color: white;
            border-radius: 50%;
            margin: 0 auto;

            position: relative;
            top: -30px;
        }
        #heart{
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            position: relative;
            top: 40px;
            left: 120px;

            /* 向四周添加阴影效果 */
            box-shadow: 2px 5px 2px gainsboro inset;
            border: 1px gainsboro solid;
        }
        #left_arm,#right_arm{
            width: 120px;
            height: 300px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            border-radius: 50%;
            top: -380px;
            left: -110px;
            transform: rotate(20deg);
            z-index: -1;

        }
        #right_arm{
            transform: rotate(-20deg);
            left: 110px;
            top: -680px; 
        }
        #left_bigfinger,#right_bigfinger{
            height: 50px;
            width: 20px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            margin: 0 auto;
            top: 275px;
            left: 45px;

            transform: rotate(-40deg);
        }
        #right_bigfinger{
            transform: rotate(40deg);
            top: 275px;
            left: 60px;
        }

        #left_smallfinger,#right_smallfinger{
            height: 40px;
            width: 15px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            margin: 0 auto;
            top: 273px;
            left: 60px;

            transform: rotate(-40deg);
        }
        #right_smallfinger{
            transform: rotate(40deg);
            top: 270px;
            left: 50px;
        }

        #left_leg,#right_leg{
            height: 200px;
            width: 100px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            top: -750px;
            left: -52px;
            border-radius: 40% 30% 10px 45%;
            z-index: -1;
        }
        #right_leg{
            border-radius: 30% 40% 45% 10px;
            left: 52px;
            top: -950px;
            margin: 0 auto;
            transform: rotate(1deg);
        }




    </style>
</head>
<body>  
    <div id="dabai">
        <!-- 定义头部、眼睛、嘴巴 -->
        <div id="head">
            <div id="eye1"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>
        <!-- 定义躯干以及心脏 -->
        <div id="torso">
            <div id="heart"></div>
        </div>
        <!-- 定义肚子腹部、包括和躯干的链接处 -->
        <div id="belly">
            <div id="contain"></div>
        </div>
        <!-- 定义左臂，包括一大一小的两个手指 -->
        <div id="left_arm">
            <div id="left_bigfinger"></div>
            <div id="left_smallfinger"></div>
        </div>
        <!-- 定义右臂，包括一大一小的两个手指 -->
        <div id="right_arm">
            <div id="right_bigfinger"></div>
            <div id="right_smallfinger"></div>
        </div>
        <!-- 定义左腿 -->
        <div id="left_leg"></div>
        <!-- 定义右腿 -->
        <div id="right_leg"></div>
    </div>
</body>
</html>

这里有个优化效果，在上面的基础上，再用到animation动画相关属性，就可以让大白机器人眨眼睛了。 style标签中加上如下代码---->

<style>
        @keyframes blink{
            40%{
                transform: rotateX(80deg);
            }
        }
</style>

再将其绑定到

        #eye1,#eye2{
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            
            /* transform: rotate(8deg); */
            animation: blink 1s ease-in-out infinite alternate;
        }

最终效果如下：在这里插入图片描述

供初学css的童鞋一起做练习，大家喜欢的话可以点赞、留言、加关注啊！在这里插入图片描述