微思考源码weisico.com|分享互联网优质资源,免费织梦模板,WP主题下载

HTML5+CSS打造网页版大白

看过《超能陆战队》的朋友,对于片中的大白,想必有很深的印象,这里我们用HTML5+CSS来实现网页版的大白

dhh12_9bbc1453-84eb-4656-abf6-25b244adf6fe.jpg

网页版大白完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
<style>
body {
    background: #595959;
}
#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: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>
        <!-- 定义肚子腹部,包括 cover(和躯干的连接处) -->
        <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>

Web大白出场

QQ截图20150629090106.png

代码参考http://jsdm.com/jsw/paint/P1t7n

大白(美国动画《超能陆战队》中机器人)
 大白,迪士尼动画《超能陆战队》中的健康机器人,是一个体型胖胖的充气机器人,因呆萌的外表和善良的本质获得大家的喜爱,被称为“萌神”。
它是只充气机器人,也是个医疗伴侣,能够快速扫描,检测出人体的不正常情绪或受伤,并对其治疗。大白呆萌可爱,作为机器人医生它很称职,也是小宏最好的朋友。小宏之后对其进行改造,经过火箭拳套、超强力量等一系列精巧改造后,大白成为了"超能陆战队"的一员大将。 

微信公众号 weisico-com

微信公众号weisico-com

转载请注明:微思考学习网-关注技术,分享知识 >> HTML5+CSS打造网页版大白

赞 (0) 收藏
分享到