纯css3实现动态大脸猫效果

于 2017-01-01 13:39:20 发布
阅读量730 收藏
点赞数
分类专栏： CSS3 文章标签： css3 大脸猫
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/normol/article/details/53965946
版权

在知乎上一片文章上看到的，当时有兴趣就模仿了一遍，具体之前看过的网址没有收藏，

实现效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>大脸猫</title>
</head>
<style>
*{
	margin:0;
	padding:0;

}

.face{
	left:50%;
	top:50%;
	position: absolute;;
	width: 400px;
	height: 340px;
	margin-left:-200px;
	margin-top: -170px;
	border-radius: 50% 50% 35% 35%;
	border:2px solid #000;
	background: #f3f3f3;
	overflow: hidden;
	/*为了遮住耳朵*/
	z-index: 2;
}

.ear-wrap{
	position: absolute;
	top:50%;
	margin-top: -200px;
	left:50%;
	margin-left: -200px;
	width: 400px;
}
.ear{
	width: 160px;
	height: 200px;
	position: absolute;
	left:0;
	top:-22px;
	border: 2px solid black;
	background: #f3f3f3;
	border-radius: 4% 80% 0% 50%;
	transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	-webkit-transform:rotate(-15deg);
	transition:all 1s;
}
.ear-wrap .right{
	right:0;
	left:auto;
	border-radius: 80% 4% 50% 0%;
	transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	-webkit-transform:rotate(15deg);
}

.hair{
	/*自我理解：其absolute是针对其最近的包含块而言的
	定位，默认left:0,top:0;而包含块一般是局有定位属性的
	元素*/
	position: absolute;
	width: 180px;
	height: 160px;
	left:50%;
	margin-left: -90px;
	background: #8d8d8d;
	overflow: hidden;
	border-radius: 0 0 50% 50%;
}
.hair div{
	width: 90px;
	height: 160px;
	background: #f0ac6b;
}

.eye-wrap{
	position: absolute;
	width: 300px;
	height: 60px;
	top:200px;
	left:50%;
	margin-left: -150px;
	overflow: hidden;
	/*background: yellow;
	实验：这儿加背景不会覆盖
	眼珠颜色
	*/
}
.eye-wrap .right{
	left:auto;
	right: 0px;
}
.eye-wrap .eye{
	height: 100px;
	width: 100px;
	position: absolute;
	/*background: white;
	实验：这儿加背景会
	覆盖眼珠颜色？？
	*/
}
.eye-wrap .eye-circle{
	width: 100px;
	height:100px;
	border:2px solid #000;
	overflow: hidden;
	position: absolute;
	border-radius: 50%;
	box-sizing:border-box;
}
.eye-wrap .eye-core{
	height: 100px;
	width: 30px;
	position: absolute;
	left:50%;
	margin-left: -15px;
	background: #000;
	transition:all 1s;
}
.eye-wrap .eye-bottom{
	height: 50px;
	width: 160px;
	border-radius: 50%;
	background: #f6f7f2;
	position: absolute;
	margin-top: 50px;
	border-top: 2px solid #000;
	left: -30px;
	transition:all 1s;
}
.eye-red{
	position: absolute;
	height: 28px;
	width:70px;
	background: red;
	top:34px;
	left:18px;
	border-radius: 50% 50% 50% 50%;
	 background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
	  background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
	  background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
	  opacity: 0.0;
	  transition:all 0.1s ;
}

.nose{
	width: 30px;
	height: 10px;
	border-bottom: 8px solid #000;
	border-radius: 0% 0% 50% 50%;
	top:250px;
	left:50%;
	margin-left: -15px;
	position: absolute;
}

.mouth-wrap{
	position: absolute;
	top:268px;
	width: 100px;
	left:50%;
	margin-left: -50px;
	height: 20px;
	overflow: hidden;
}
.mouth{
	box-sizing:border-box;
	width: 50px;
	height: 40px;
	position: absolute;
	margin-top:-26px;
	left:0;
	border-right:4px solid #000;
	border-bottom:4px solid #000;
	border-radius: 0% 40% 50% 20%;
	transition:all 1s;
}
.mouth-wrap .right{
	border-radius: 40% 0% 20% 50%;
	border-left:4px solid #000;
	border-bottom:4px solid #000;
	border-right: 0;
	left:auto;
	right: 0;
}

.mustache-wrap{
	height: 80px;
	width:380px;
	position: absolute;
	top:190px;
	left:50%;
	margin-left: -190px;
	
}
.mustache>div:first-child{
	width: 30px;
	height: 10px;
	border-top: 6px  #E53941 solid;
	border-radius: 30% 50% 20% 50%;
	  transform: rotate(25deg);
   	 -ms-transform: rotate(25deg);
	   -moz-transform: rotate(25deg);
	   -webkit-transform: rotate(25deg);
	   -o-transform: rotate(25deg);
	   margin-left: 20px;
}
.mustache>div:nth-child(2){
	width: 30px;
	height: 6px;
	border-top: 6px  #E53941 solid;
	border-radius: 50%;
	  transform: rotate(25deg);
   	 -ms-transform: rotate(25deg);
	   -moz-transform: rotate(25deg);
	   -webkit-transform: rotate(25deg);
	   -o-transform: rotate(25deg);
	   margin-left: 20px;
}


.mustache > div:nth-child(3) {
    /*margin-top:10px;*/
    width: 32px;
    height: 10px;
    border-bottom: 4px #E53941 solid;
    border-radius: 30% 0% 50% 30%;
    transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    margin-left: 8px;
}
.mustache > div:nth-child(4) {
    margin-top: 20px;
    width: 26px;
    height: 20px;
    border-bottom: 4px #E53941 solid;
    border-radius: 30% 0% 50% 30%;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    margin-left: 28px;
}
.mustache > div:last-child {
    width: 22px;
    height: 10px;
    border-bottom: 3px #E53941 solid;
    border-radius: 0% 0% 50% 50%;
    transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    margin-left: 40px;
    margin-top: -8px;
}
/*右边胡子*/
.mustache-wrap .right {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
    -moz-transform: rotateY(180deg); /* Firefox */
    margin-top: -85px;
}





.container:hover .ear-wrap>div:first-child{
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transition:all 1s;
	border-radius: 4% 80% 0% 60%;
}
.container:hover .ear-wrap>div:last-child{
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transition:all 1s;
	border-radius: 80% 4%   60% 0%;
}

.container:hover .eye-bottom{
	margin-top: 30px;
	transition:all 1s;
}
.container:hover .eye-red{
	opacity: 1;
	transition:all 2.5s;
}
.container:hover .mouth{
	border-radius: 50%;
	transition:all 1s;
}
.container:hover .eye-core{
	width: 40px;
	margin-left: -20px;
	transition:all 1s;
}
</style>
<body>
	<div class="container">
		<!-- 脸-->
		<div class="face">

			<!-- 头发 -->
			<div class="hair">
				<div></div>
			</div>
			<!-- 眼睛 -->
			<div class="eye-wrap">
				<!-- 左眼睛 -->
				<div class="eye left">
					<!-- 眼眶 -->
					<div class="eye-circle">
						<!-- 眼珠 -->
						<div class="eye-core">
						</div>
					</div>
					<!-- 下眼线 -->
					<div class="eye-bottom"></div>
					<div class="eye-red"></div>
				</div>
				<!-- 右眼睛 -->
				<div class="eye right">
					<!-- 眼眶 -->
					<div class="eye-circle">
						<!-- 眼珠 -->
						<div class="eye-core">
						</div>
					</div>
					<!-- 下眼线 -->
					<div class="eye-bottom"></div>
					<div class="eye-red"></div>
				</div>
			</div>	
			<!-- 鼻子 -->
			<div class="nose">
			</div>
			<!-- 嘴巴 -->
			<div class="mouth-wrap">
				<div class="mouth left"></div>
				<div class="mouth right"></div>
			</div>	
			<div class="mustache-wrap">
				<div class="mustache left">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="mustache right">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>		
		</div>
		<!-- 耳朵-->
		<div class="ear-wrap">
			<div class="ear left">
			</div>
			<div class="ear right">
			</div>
		</div>
	</div>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值