DIV+CSS3製作哆啦A夢頭像

原創

贰拾肆樵

2020-02-21 18:22

先展示一下我的頭像吧。

作爲一個前端ER，我的頭像當然不能是繪畫工具畫出來的。沒錯，這個玩意是由HTML+CSS代碼實現的，過年的某一天晚上無聊花了一個小時敲出來的。來看看它原本的樣子：

爲什麼會變成第一張圖的樣子呢。那個呆萌的線條貓其實是IE的傑作。

下面貼出源碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3繪製機器貓頭像</title>
	<style type="text/css">
	#head{
		width: 460px;
		height: 440px;
		border: 2px solid rgb(41,102,123);
		border-radius: 220px;
		background-image: -moz-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
		background-image: -webkit-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
	}
	#eyes{
		position: relative;
		top: 63px;
		margin: 0 auto;
		width: 207px;
		height: 120px;
	}
	#lefteye,#righteye{
		position: absolute;
		display: inline-block;
		width: 100px;
		height: 120px;
		border: 2px solid black;
		border-radius: 50px;
		background: white;
		z-index: 3;
	}
	#righteye{
		right: 0;	
	}
	#lefteyeball,#righteyeball{
		position: absolute;
		top: 70px;
		background: black;
		width: 20px;
		height: 20px;
		border-radius: 10px;
	}
	#lefteyeball{
		right: 5px;
		top: 62px;
		/*-moz-animation: leyeballMove 1s;*/
		-moz-animation-iteration-count: infinite;
		-moz-animation-direction: alternate;
	}
	#righteyeball{
		left: 5px;
		top: 62px;
		/*-moz-animation: reyeballMove 1s;*/
		-moz-animation-iteration-count: infinite;
		-moz-animation-direction: alternate;
	}
	#face{
		position: relative;
		z-index: 2;
		margin: 0 auto;
		top: 13px;
		width: 350px;
		height: 280px;
		border-radius: 230px;
		border: 2px solid black;
		background: white;
	}
	#nose{
		position: relative;
		top: 32px;
		margin: 0 auto;
		width: 41px;
		height: 41px;
		border: 2px solid black;
		border-radius: 22px;
		background-image: radial-gradient(11px 11px at 30px 17px,rgb(255,255,255),rgb(208,56,7));
	}
	#mustache{
		position: relative;
		top: 60px;
		margin: 0 auto;
		width: 307px;
		height: 50px;
	}
	#leftmustache{
		position: absolute;
		left: 0;
	}
	#rightmustache{
		position: absolute;
		right: 0;
	}
	#lm1,#rm1{
		width: 80px;
		height: 3px;
		background: black;
		margin-bottom: 13px;
	}
	#lm2,#rm2{
		width: 78px;
		height: 3px;
		background: black;
	}
	#lm3,#rm3{
		width: 80px;
		height: 3px;
		background: black;
		margin-top: 13px;
	}
	#lm1{
		transform-origin: 70px 0;
		transform: rotate(20deg);
	}
	#lm3{
		transform-origin: 70px 0;
		transform: rotate(-20deg);
	}
	#rm1{
		transform-origin: 10px 0;
		transform: rotate(-20deg);
	}
	#rm3{
		transform-origin: 10px 0;
		transform: rotate(20deg);
	}
	#line{
		position: relative;
		margin: 0 auto;
		top: -18px;
		height: 160px;
		width: 3px;
		background: black;
	}
	#mouse{
		width: 300px;
		height: 100px;
		position: relative;
		margin: 0 auto;
		top: -82px;
		overflow: hidden;
	}
	#mouseline{
		position: relative;
		top: -242px;
		margin: 0 auto;
		width: 300px;
		height: 300px;
		border-radius: 150px;
		border: 3px solid black;


	}
	#neck{
		position: relative;
		z-index: 10;
		top: 5px;
		margin: 0 auto;
		width: 297px;
		height: 30px;
		border: 2px solid black;
		border-radius: 16px;
		background-image: -moz-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
		background-image: -webkit-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
	}
	#ring{
		position: relative;
		top: 10px;
		margin: 0 auto;
		width: 50px;
		height: 50px;
		border:2px solid black;
		border-radius: 50px;
		background-image: radial-gradient(21px 21px at 30px 17px,rgb(255,255,179),rgb(188,182,24));
		overflow: hidden;
	}
	#l1,#l2,#l3,#l4{
		position: relative;
		background: black;
	}
	#ring #l1{
		top: 13px;
		width: 100%;
		height: 2px;
	}
	#ring #l2{
		top: 16px;
		width: 100%;
		height: 2px;
	}
	#ring #l3{
		margin: 0 auto;
		top: 22px;
		width: 16px;
		height: 15px;
		border-radius: 8px;
	}
	#ring #l4{
		top: 8px;
		height: 100%;
		width: 3px;
		margin: 0 auto;
	}

	@-moz-keyframes leyeballMove{
		0%{
			right: 5px;
			top: 62px;
		}
		25%{
			right: 20px;
			top: 90px;
		}
		50%{
			right: 40px;
			top: 95px;
		}
		75%{
			right: 60px;
			top: 90px;
		}
		100%{
			right: 75px;
			top: 62px;
		}
	}
	@-moz-keyframes reyeballMove{
		0%{
			left: 5px;
			top: 62px;
		}
		25%{
			left: 20px;
			top: 90px;
		}
		50%{
			left: 40px;
			top: 95px;
		}
		75%{
			left: 60px;
			top: 90px;
		}
		100%{
			left: 75px;
			top: 62px;
		}
	}
	</style>
</head>
<body>
	<div id="head">
		<div id="eyes">
			<div id="lefteye">
				<div id="lefteyeball"></div>
			</div>
			<div id="righteye">
				<div id="righteyeball"></div>
			</div>
		</div>
		<div id="face">
			<div id="nose"></div>
			<div id="mustache">
				<div id="leftmustache">
					<div id="lm1"></div>
					<div id="lm2"></div>
					<div id="lm3"></div>
				</div>
				<div id="rightmustache">
					<div id="rm1"></div>
					<div id="rm2"></div>
					<div id="rm3"></div>
				</div>
			</div>
			<div id="line"></div>
			<div id="mouse">
				<div id="mouseline"></div>
			</div>
		</div>
		<div id="neck">
			<div id="ring">
				<div id="l1"></div>
				<div id="l2"></div>
				<div id="l3"></div>
				<div id="l4"></div>
			</div>
		</div>
	</div>
</body>
</html>

當中主要用到了CSS3的漸變、旋轉、圓角等特性，進行繪圖的。然而完全只考慮了火狐的效果，完全未考慮兼容問題，於是纔有了各種各樣的貓：

這是火狐貓