• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

模仿前辈写的多啦A梦 加强对css的练习

精选代码 Tomy 418次浏览 已收录 1个评论 扫描二维码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多啦A梦</title>
	<style>
		.box{
			width: 800px;
			height: 1000px;
			background: #eee;
			margin: 100px auto;
		}
		/*头*/
		.head{
			width: 400px;
			height: 400px;
			margin: 0 auto;
			border:1px solid #222;
			border-radius: 50%;
			background:-webkit-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%);
			background:-moz-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%);
			background:-o-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%);
			position: relative;
			z-index: 1;
		}
		/*脸*/
		.face{
			width: 340px;
			height: 260px;
			border:1px solid #222;
			border-radius: 50%;
			background:-webkit-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%);
			background:-moz-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%);
			background:-o-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%);
			position: absolute;
			bottom: 20px;
			left: 30px;
		}
		/*嘴巴*/
		.mouse{
			width:200px;
			height:80px;
			border-bottom:2px solid #222;
			border-radius:50%;
			position:absolute;
			bottom:40px;
			left:70px;
			}
		.mouse:after{
			width:4px;
		    height:134px;
		    background:#222;
		    content:"";
		    position:absolute;
		    bottom:0;
		    left:98px;}
		/*鼻子*/
		.nose{
			width: 40px;
			height: 40px;
			border:1px solid #222;
			border-radius: 50%;
			background:-webkit-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900);
			background:-moz-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900);
			background:-o-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900);
			position: absolute;
			top: 42px;
			left:150px;
		}
		/*胡须*/
		.beard{
			width: 266px;
			height: 120px;
			position: absolute;
			top: 50px;
			left: 35px;
		}
		.beard li{list-style: none;}
		.beard_l{
			width: 120px;
			position: absolute;
			position:absolute;
			top:20px; left:0;
			}
		.beard_r{
			width:120px;
			position:absolute;
			top:20px;
		    right:0;
			}
		.beard_l ul li, .beard_r ul li{
			width:90px;
			height:2px;
			background:#222;
			position:absolute;
			}
		.lh1{top:10px; left:10px; transform:rotate(20deg);}
		.lh2{top:40px; left:10px;}
		.lh3{top:70px; left:10px; transform:rotate(-20deg);}
		.rh1{top:10px; right:10px; transform:rotate(160deg);}
		.rh2{top:40px; right:10px;}
		.rh3{top:70px; right:10px; transform:rotate(-160deg);}
		/*眼睛*/
		.eyes{
			width:200px;
			height:120px;
			position:absolute;
			top:-38px;
			left:70px;
		}
		.eyes_l{
			width: 96px;
			height: 100px;
			border-radius: 50%;
			border:1px solid #222;
			background: #fff;
			float: left;
		}
		.eyes_l:after{
			width: 40px;
			height: 40px;
			background:-webkit-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
			background:-moz-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
			background:-o-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
		    border-radius:50%;
		    content:"";
		    position:absolute;
		    bottom:30px; right:40px;
		}
		.eyes_r{
			width: 96px;
			height: 100px;
			border-radius: 50%;
			border:1px solid #222;
			background: #fff;
			float: right;
		}
		.eyes_r:after{
			width: 40px;
			height: 40px;
			background:-webkit-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
			background:-moz-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
			background:-o-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%);
		    border-radius:50%;
		    content:"";
		    position:absolute;
		    bottom:30px; left:40px;}
		/*身体*/
		.body{
			width: 500px;
			height: 270px;
			position: relative;
			margin: -20px auto;
			z-index: 2
		}
		.bozi{
			width:240px;
			height:26px;
			border:1px solid #222;
			border-radius:26px;
			position: absolute;
			left: 132px;
			background:-webkit-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%);
			background:-moz-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%);
			background:-o-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%);
			z-index: 999;
			top: 2px;
		}
		.bell_top{width:220px;
			height:80px;
			background:-webkit-linear-gradient(left,#0484a8,#0cc6ec);
			background:-moz-linear-gradient(left,#0484a8,#0cc6ec);
			background:-o-linear-gradient(left,#0484a8,#0cc6ec);
			position:absolute;
			top:30px;
			left:140px;
			z-index:2;
		}
		.belly{
			width:280px;
			height:160px;
			border:1px solid #222;
			border-top:none;
			background:-webkit-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%);
			background:-moz-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%);
			background:-o-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%);
			position:absolute;
			top:110px;
			left:108px;
			z-index:12;
		}
		.belly:after{
			width:40px;
			height:20px;
			content:"";
			background:#eee;
			position:absolute;
			bottom:-1px;
			left:120px;
			border-top:1px solid #222;
			border-radius:20px 20px 0 0;
		}
		.bag{
			width:200px;
			height:200px;
			border:1px solid #222;
			border-radius:50%;
			background:#fff;
			position:absolute;
			top:3px; left:150px;
			z-index:20;
		}
		.bag:after{
			width:160px;
			height:80px;
			border:1px solid #222;
			border-radius:0 0 80px 80px;
			content:"";
			position:absolute;
			bottom:20px;
			left:20px;
		}
		/*左手*/
		.l_hand{
			position:absolute;
			left:70px;
			top:0;
			z-index:1;}
		.l_h_arm{
			width:70px;
			height:190px;
			background:-webkit-linear-gradient(50deg,#047294 0%,#048eb4 100%);
			background:-moz-linear-gradient(50deg,#047294 0%,#048eb4 100%);
			background:-o-linear-gradient(50deg,#047294 0%,#048eb4 100%);
			transform:rotate(50deg);}
		.l_h_hand{
			width: 82px;
			height: 82px;
			border:1px solid #222;
			border-radius:50%;
			background:-webkit-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			background:-moz-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			background:-o-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			position:absolute;
			bottom:7px;
			right:50px;
		}
		/*右手*/
		.r_hand{
			position:absolute;
			right:70px;
			top:0;
			z-index:12;
			}
		.r_h_arm{
			width:70px;
			height:190px;
			background:#0cc6ec;
			transform:rotate(-50deg);
			transform:rotate(-50deg);
		}
		.r_h_hand{
			width: 82px;
			height: 82px;
			border:1px solid #222;
			border-radius:50%;
			background:-webkit-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			background:-moz-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			background:-o-linear-gradient(60deg,#d4cecc 0%,#fff 50%);
			position:absolute;
			bottom:7px;
			left:50px;
		}
		/*铃铛*/
		.bell{
			width:60px;
			height:60px;
			border:1px solid #222;
			border-radius:50%;
			background:-webkit-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d);
			background:-moz-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d);
			background:-o-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d);
			position:absolute;
			top:10px;
			right:215px;
			z-index:9999;
		}
		.bell:before{
			width:50px;
			height:4px;
			background:#222;
			content:"";
			position:absolute;
			top:10px;
			left:4px;
		}
		.bell:after{
			width:60px;
			height:4px;
			background:#222;
			content:"";
			position:absolute;
			top:20px;
			left:0;
		}
		.center{
			width:4px;
			height:16px;
			background:#222;
			position:absolute;
			bottom:0;
			left:28px;
		}
		.center:after{
			width:16px;
			height:16px;
			background:#222;
			border-radius:50%; content:"";
			position:absolute;
			bottom:8px;
			left:-6px;
		}
		.footer{
			width:400px;
			margin:0 auto;
			position:relative;
			z-index: 5px;
			margin-top: 20px;
		}
		.footer:before{
			width:160px;
			height:50px;
			background:-webkit-linear-gradient(50deg,#ADADAD 0%,#fff 40%);
			background:-moz-linear-gradient(50deg,#ADADAD 0%,#fff 40%);
			background:-o-linear-gradient(50deg,#ADADAD 0%,#fff 40%);
			border:1px solid #222;
			border-radius:80px 50px 50px 40px;
			content:"";
			position:absolute;
			top:0;
			left:30px;
		}
		.footer:after{
			width:160px;
			height:50px;
			background:-webkit-linear-gradient(-50deg,#fff 60%,#ADADAD 100%);
			background:-moz-linear-gradient(-50deg,#fff 60%,#ADADAD 100%);
			background:-o-linear-gradient(-50deg,#fff 60%,#ADADAD 100%);
			border:1px solid #222;
			border-radius:50px 80px 40px 50px;
			content:"";
			position:absolute; top:0;
			right:30px;
		}
</style>
	</style>
</head>
<body>
<div class="box">
	<div class="head">
			<div class="face">
				<div class="mouse"></div>
				<div class="nose"></div>
				<div class="beard">
					<div class="beard_l">
						<ul>
	                    	<li class="lh1"></li>
	                        <li class="lh2"></li>
	                        <li class="lh3"></li>
                  		</ul>
					</div>
					<div class="beard_r">
						<ul>
	                    	<li class="rh1"></li>
	                        <li class="rh2"></li>
	                        <li class="rh3"></li>
                  		</ul>
					</div>
				</div>
				<div class="eyes">
					<div class="eyes_l"></div>
					<div class="eyes_r"></div>
				</div>
			</div>
	</div>
	<div class="body">
		<div class="bozi"></div>
		<div class="l_hand">
			<div class="l_h_arm"></div>
			<div class="l_h_hand"></div>
		</div>
		<div class="r_hand">
			<div class="r_h_arm"></div>
			<div class="r_h_hand"></div>
		</div>
		<div class="bell_top"></div>
        <div class="belly"></div>
    	<div class="bag"></div>
		<div class="bell">
			<div class="center"></div>
		</div>
	</div>
	<div class="footer"></div>
</div>
</body>
</html>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明模仿前辈写的多啦A梦 加强对css的练习
喜欢 (1)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. Tomy
    顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    yangzr2016-05-22 21:05 回复 Windows 7 | Firefox 46.0