使用HTML和CSS实现大白

最新推荐文章于 2021-07-06 06:21:20 发布

刘小妞

最新推荐文章于 2021-07-06 06:21:20 发布

阅读量1k

点赞数

分类专栏： HTML(5) CSS(3) 文章标签： html css

本文链接：https://blog.csdn.net/liuwengai/article/details/51164662

版权

HTML(5) 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS(3)

24 篇文章 0 订阅

订阅专栏

今天动手实现了一下大白

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Baymax</title>
<style>

body {
    /*设置背景为渐变色*/
    background-size:100% 100%;
    background: linear-gradient(#9FE8F7,#2C9FF2);
    background-repeat:no-repeat;
    height: 1000px;
}
#baymax {   
    margin: 0 auto;/*居中*/
    height: 500px; /*设置高度*/
    overflow: hidden;
}

#head {
     /*头部背景*/
    background: #fff;
    margin: 0 auto;
    margin-bottom: -20px;
    /*头部大小*/
    height:60px;
    width: 100px;   
    border-radius: 60%;  /*设置下边框的样式*/
    border-bottom: 5px solid #e0e0e0;
    z-index: 100;   
    position: relative;
}
#eye,#eye2 {
    width: 11px;
    height: 13px;
    background: black;  
    border-radius: 50%; /*元素大小位置*/
    position: relative;
    top: 30px;
    left: 27px;    
    transform: rotate(8deg);/*旋转该元素*/
}
#eye2 {
    transform: rotate(-8deg);/*旋转*/
    left: 69px;
    top: 17px;
}
#mouth {
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: relative;
    left: 34px;
    top: 10px;
}
#torso,#belly {
    margin: 0 auto;
    height: 200px;
    width: 180px;
    background: #fff;
    border-radius: 60%;
    border: 5px solid #e0e0e0;/*设置边框*/
    border-top: none;
    z-index: 1;
}
#belly {
    height: 300px;
    width: 245px;
    margin-top: -140px;
    z-index: 5;
}
#cover {
    width: 190px;
    background: #fff;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    border-radius: 50%;
}
#heart{
  width:25px; 
  height:25px; 
  border-radius:50%; 
  position:relative; 
  box-shadow:2px 5px 2px #ccc inset;  /*向边框四周添加阴影效果*/
  right:-115px; 
  top:40px; 
  z-index:111; 
  border:1px solid #ccc;
}
#left-arm,#right-arm {
    height: 270px;
    width: 120px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -350px;
    left: -100px;
    transform: rotate(20deg);
    z-index: -1;
}
#right-arm {
    transform: rotate(-20deg);
    left: 100px;
    top: -620px;
}
#l-bigfinger,#r-bigfinger {
    height: 50px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 250px;
    left: 50px;
    transform: rotate(-50deg);
}
#r-bigfinger {
    left: 50px;
    transform: rotate(50deg);
}
#l-smallfinger,#r-smallfinger {
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}
#r-smallfinger {
    background: #fff;
    transform: rotate(40deg);
    top: 195px;
    left: 37px;
}
#left-leg,#right-leg {
    height: 170px;
    width: 90px;
    border-radius: 40% 30% 10px 45%;
    background: #fff;
    position: relative;
    top: -640px;
    left: -45px;
    transform: rotate(-1deg);
    z-index: -2;
    margin: 0 auto;
}
#right-leg {
    background: #fff;
    border-radius:30% 40% 45% 10px;
    margin: 0 auto;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}
</style>
</head>
<body>
    <div id="baymax">
        <!-- 定义头-->
        <div id="head">
            <div id="eye"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>
        <!-- 定义身体-->
        <div id="torso">
            <div id="heart"></div>
        </div>
        <!-- 定义肚子 -->
        <div id="belly">
            <div id="cover"></div>
        </div>
        <!-- 定义左手臂 -->
        <div id="left-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>
        <!-- 定义右臂-->
        <div id="right-arm">
            <div id="r-bigfinger"></div>
            <div id="r-smallfinger"></div>
        </div>
        <!-- 定义左腿 -->
        <div id="left-leg"></div>
        <!-- 定义右腿 -->
        <div id="right-leg"></div>
    </div>
</body>
</html>

刘小妞

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用HTML和CSS实现大白

今天动手实现了一下大白<!doctype html><html><head><meta charset="utf-8"><title>Baymax</title><style>body { /*设置背景为渐变色*/ background-size:100% 100%; background: linear-gradient(#9FE8F7,#2C9FF2);
复制链接

扫一扫