纯css3实现动态大脸猫效果_"style = \"position: absolute; top: -250px; right:-程序员宅基地

技术标签: 大脸猫  css3  CSS3  

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

实现效果如图:

<!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>


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/normol/article/details/53965946

智能推荐

goahead webserver源码分析_socketdoevent-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏2次。转载goahead webserver源码分析 1.一个txt文本架构图main() | |--websOpenServer() | |-- websOpenListen() | |--socketOpenConnection() | _socketdoevent

Android 封装RecyclerView.Adapter,省其ViewHolder_android自己封装recyclerview.adapter报holder转换异常-程序员宅基地

文章浏览阅读1.4k次。RecyclerView大家都使用过的话会有些不方便,现在对其封装一下,让其可以: 1.可以像ListView一样方便使用OnItemClickListener; 2.可省去ViewHolder,快速开发; 3.分割线问题,即提供万能分割线。先看效果图: 贴上如何使用: LinearLayoutManager layoutManager = new LinearL..._android自己封装recyclerview.adapter报holder转换异常

Linux 常用命令之搜索文件中的特殊字符并且高亮显示_linux高亮文件内容中的字符串-程序员宅基地

文章浏览阅读3.1k次。方法1:vim命令模式下利用 :/ 要搜索的内容 如 ":/ keyword" 在vim中搜索keyword方法2:使用less命令less passwd然后输入:/keyword回车此时如果有keyword字符串,linux会把该字符已高亮方式显示。_linux高亮文件内容中的字符串

QT 主窗口和子窗口相互切换示例_qtside6 窗口间切换-程序员宅基地

文章浏览阅读1.1w次。转载自:https://www.cnblogs.com/lsgxeva/p/7808906.htmlQT 主窗口和子窗口相互切换示例QT 主窗口和子窗口相互切换示例文件列表: SubWidget.h#ifndef SUBWIDGET_H#define SUBWIDGET_H#include &lt;QtWidgets/QWidget&gt;#include &lt;QtWidgets/QP..._qtside6 窗口间切换

使用Go默写古诗词_python中默写诗词-程序员宅基地

文章浏览阅读590次。“白日依山尽,___”。下句自然填黄河入海流,那么“日月忽其不淹兮,___,___,恐美人之迟暮”,中间两句怎么填呢? 最近工作中有个需求,就是1500道语文诗词填空题没有答案,现在需要给这些题目大爷们匹配它们对应的答案,好在题目信息都很完整,指出了诗词出处、作者信息。自然想到到网上爬取对应文章信息然后字符串匹配答案。目前做完,效果还可以,基本上所有题目的答案都有了,现把操作流程记..._python中默写诗词

消息队列——kafka——java集成与操作-程序员宅基地

文章浏览阅读1.6k次。目录一、java集成kafka:1、所需环境:2、引入jar包:3、创建基础Properties:(1)单机kafka的基础Properties:(2)集群kafka的基础Properties:4、创建生产者公共参数Properties:5、创建消费者公共参数Properties:二、Java操作kafka:1、创建topic:2、查看所有topic:...

随便推点

HAPOOP实战实例-程序员宅基地

文章浏览阅读1.2k次。来源:http://www.open-open.com/lib/view/open1328755683796.html Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式,让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同java程序员可以不考虑内存泄露一样, MapReduce的run-time系统会解决输入数据的分_hapoop

ssh连接其他主机时候ssh_exchange_identification: Connection closed by remote host-程序员宅基地

文章浏览阅读356次。如果是普通的连接可以考虑way1,如果是秘钥连接如ansible或者putty之类的需要考虑way2,通常情况下需要用way2解决。解决办法:Way1:目标计算机变更,把用户主目录下的.ssh/删除就可以了Way2:修改/etc/hosts.allow文件,加入sshd:ALL。 转载于:https://blog.51cto.com/frankch/178..._git 迁移后ssh_exchange_identification: connection closed by remote host

Server&&Freeswitch&&命令详解_fs_cli-程序员宅基地

文章浏览阅读1.2k次。Server&&Freeswitch&&命令详解服务命令freeswitch - 启动freeswitch服务并进入控制台freeswitch -nc - 启动freeswitch服务并后台运行fs_cli - 进入freeswitch控制台控制台命令help - 查看帮助... 或 shutdown - 停止freeswitch服务module_exists - 查询目标模块是否已经加载load - 加载目标模块reload - 重新加载目标模块status - 查看当前_fs_cli

apache-comnons系列之commons-imaging1.0 学习笔记_spring boot apache commons imaging-程序员宅基地

文章浏览阅读3.7k次。apache-comnons系列之commons-imaging1.0 学习笔记概述Imaging The primary application programming interface (API) to the Imaging library.ImageInfo ImageInfo represents a collection of basic properties of an im_spring boot apache commons imaging

webrtc 的回声抵消(aec、aecm)算法简介_webrtc aecm-程序员宅基地

文章浏览阅读1.1k次。webrtc 的回声抵消(aec、aecm)算法主要包括以下几个重要模块:1.回声时延估计 2.NLMS(归一化最小均方自适应算法) 3.NLP(非线性滤波) 4.CNG(舒适噪声产生),一般经典aec算法还应包括双端检测(DT)。考虑到webrtc使用的NLMS、NLP和CNG都属于经典算法范畴,故只做简略介绍,本文重点介绍webrtc的回声时延估计算法,这也是webrtc回声抵消算法区别一般算_webrtc aecm

python OPCUA服务器和客户端开发_import sys sys.path.insert(0, "..") import time fr-程序员宅基地

文章浏览阅读2.6k次。环境准备安装开源的OPCUA包,安装采用pip安装。pip install opcua服务器端程序开发主要需要修改的内容为发布的网络地址:127.0.0.1表示发布为本机地址。import syssys.path.insert(0, "..")import timefrom opcua import ua, Serverif __name__ == "__main__": # setup our server server = Server() ._import sys sys.path.insert(0, "..") import time from opcua import ua, server