哈哈哈
每个人都是独立的个体,大白也不例外,仔细观察大白有一个圆圆的头加一对黑溜溜的眼睛,没有腹肌的躯干和一颗裸露的心脏,圆滚滚的肚子两边一对宽厚的臂膀,仔细看还有两个萌萌哒小手指呢,最后一对粗的像大象一样的大腿才能支撑这软软的肚子嘛,哈哈~
- /*使用了一个渐变色,没有做各个浏览器的兼容性处理*/
- body {
- background: linear - gradient(to bottom, #f91818 0 % , #ea8181 100 % );
- }
- <divid="baymax"></div>
- #baymax {
- margin: 0 auto;/*设置为 居中*/
- height: 600px; /*设置高度*/
- overflow: hidden; /*隐藏溢出*/
- }
大白头部效果. png
- <div id="head">
- <div id="eye">
- <div id="eye2">
- <div id="mouth">#head {height:64px;width:100px;border-radius:50%;/*以百分比定义圆角的形状*/background:#fff;/*定义背景颜色*/margin:0 auto;/*头部居中*/margin-bottom: -20px;/*这个是为了使头部与身体融为一体*/border-bottom:5px solid#e0e0e0;/*设置下边框的样式,制作阴影的效果*/z-index:100;/*属性设置元素的堆叠顺序;拥有更高堆叠顺序的元素总是会
- 处于堆叠顺序较低的元素的前面*/position: relative;/*生成相对定位的元素,方便眼睛和嘴巴的定位*/
- }#eye,#eye2 {width:11px;height:13px;background:#282828;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;
- }
大白躯干效果. png
- <div id="torso">
- <div id="heart">#torso {margin:0 auto;height:200px;width:180px;background:#fff;border-radius:47%;/*设置圆角*/border:5px solid#e0e0e0;/*设置边框*/border-top: none;/*因为顶部要跟头部做衔接,所以顶部不设置边框*/z-index:1;/*保证躯干堆叠在头部的里面*/
- }
- #heart{width:25px;height:25px;border-radius:50%;box-shadow:2px5px2px#ccc inset;/*向边框四周添加阴影效果*/position:relative;/*设置心脏相对于躯干的位置*/right:-115px;top:40px;z-index:111;/*保证心脏堆叠在躯干的外面*/border:1px solid#ccc;
- }
大白的肚子效果. png
- <div id="belly">
- <div id="cover">#belly {margin:0 auto;height:300px;width:245px;margin-top: -140px;/*将腹部往上移动,差不多移到躯干的中间位置*/background:#fff;border-radius:47%;border:5px solid#e0e0e0;/*设置边框*/border-top: none;z-index:5;/*保证腹部堆叠在躯干的外面*/
- }#cover {width:190px;background:#fff;height:150px;margin:0 auto;position: relative;/*将cover部分相对定位到要遮挡的位置*/top: -20px;border-radius:50%;
- }
大白手臂效果. png
- #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);
- /*将手臂(椭圆)顺时针旋转20度,更加贴合躯干*/
- z - index: -1;
- /*保证手臂堆叠在躯干的里面*/
- }#right - arm {
- transform: rotate( - 20deg);
- /*右手臂(椭圆)相应的逆时针旋转20度,与左手臂对称*/
- 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 {
- transform: rotate(40deg);
- left: 37px;
- }
大白腿部效果. png
- <div id="left-leg">
- <div id="right-leg">#left-leg,#right-leg {height:170px;width:90px;border-radius:40%30%10px45%;/*矩形的左上、右上、左下、右下各个角度画不同程度的圆角*/background:#fff;position: relative;/*相对定位到对应的位置*/top: -640px;left: -45px;transform: rotate(-1deg);z-index: -2;/*保证腿部堆叠在最下面*/margin:0 auto;
- }#right-leg {border-radius:30%40%45%10px;top: -810px;left:50px;transform: rotate(1deg);
- }
- <html><head><metacharset="utf-8"><metacontent="IE=edge,chrome=1"http-equiv="X-UA-Compatible"><title>html+CSS实现大白的画法</title><metacontent=""name="description"><metacontent=""name="keywords"><styletype="text/css">
- /*定义整体的背景色*/body {background:linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}#baymax {/*设置为 居中*/margin:0 auto;/*高度*/height:600px;/*隐藏溢出*/overflow: hidden;
- }#head {height:64px;width:100px;/*以百分比定义圆角的形状*/border-radius:50%;/*背景*/background:#fff;margin:0 auto;margin-bottom: -20px;/*设置下边框的样式*/border-bottom:5px solid#e0e0e0;/*属性设置元素的堆叠顺序;
- 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/z-index:100;/*生成相对定位的元素*/position: relative;
- }#eye,#eye2 {width:11px;height:13px;background:#282828;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:47%;/*设置边框*/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:2px5px2px#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%10px45%;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><divid="baymax"><divid="head"><divid="eye"></div><divid="eye2"></div><divid="mouth"></div></div><divid="torso"><divid="heart"></div></div><divid="belly"><divid="cover"></div></div><divid="left-arm"><divid="l-bigfinger"></div><divid="l-smallfinger"></div></div><divid="right-arm"><divid="r-bigfinger"></div><divid="r-smallfinger"></div></div><divid="left-leg"></div><divid="right-leg"></div></div></body></html>
来源: http://www.cnblogs.com/jiaoyu121/p/6979625.html