在知乎上一片文章上看到的,当时有兴趣就模仿了一遍,具体之前看过的网址没有收藏,
实现效果如图:
<!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>
文章浏览阅读1.1k次,点赞2次,收藏2次。转载goahead webserver源码分析 1.一个txt文本架构图main() | |--websOpenServer() | |-- websOpenListen() | |--socketOpenConnection() | _socketdoevent
文章浏览阅读1.4k次。RecyclerView大家都使用过的话会有些不方便,现在对其封装一下,让其可以: 1.可以像ListView一样方便使用OnItemClickListener; 2.可省去ViewHolder,快速开发; 3.分割线问题,即提供万能分割线。先看效果图: 贴上如何使用: LinearLayoutManager layoutManager = new LinearL..._android自己封装recyclerview.adapter报holder转换异常
文章浏览阅读3.1k次。方法1:vim命令模式下利用 :/ 要搜索的内容 如 ":/ keyword" 在vim中搜索keyword方法2:使用less命令less passwd然后输入:/keyword回车此时如果有keyword字符串,linux会把该字符已高亮方式显示。_linux高亮文件内容中的字符串
文章浏览阅读1.1w次。转载自:https://www.cnblogs.com/lsgxeva/p/7808906.htmlQT 主窗口和子窗口相互切换示例QT 主窗口和子窗口相互切换示例文件列表: SubWidget.h#ifndef SUBWIDGET_H#define SUBWIDGET_H#include <QtWidgets/QWidget>#include <QtWidgets/QP..._qtside6 窗口间切换
文章浏览阅读590次。“白日依山尽,___”。下句自然填黄河入海流,那么“日月忽其不淹兮,___,___,恐美人之迟暮”,中间两句怎么填呢? 最近工作中有个需求,就是1500道语文诗词填空题没有答案,现在需要给这些题目大爷们匹配它们对应的答案,好在题目信息都很完整,指出了诗词出处、作者信息。自然想到到网上爬取对应文章信息然后字符串匹配答案。目前做完,效果还可以,基本上所有题目的答案都有了,现把操作流程记..._python中默写诗词
文章浏览阅读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:...
文章浏览阅读1.2k次。来源:http://www.open-open.com/lib/view/open1328755683796.html Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式,让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同java程序员可以不考虑内存泄露一样, MapReduce的run-time系统会解决输入数据的分_hapoop
文章浏览阅读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
文章浏览阅读1.2k次。Server&&Freeswitch&&命令详解服务命令freeswitch - 启动freeswitch服务并进入控制台freeswitch -nc - 启动freeswitch服务并后台运行fs_cli - 进入freeswitch控制台控制台命令help - 查看帮助... 或 shutdown - 停止freeswitch服务module_exists - 查询目标模块是否已经加载load - 加载目标模块reload - 重新加载目标模块status - 查看当前_fs_cli
文章浏览阅读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
文章浏览阅读1.1k次。webrtc 的回声抵消(aec、aecm)算法主要包括以下几个重要模块:1.回声时延估计 2.NLMS(归一化最小均方自适应算法) 3.NLP(非线性滤波) 4.CNG(舒适噪声产生),一般经典aec算法还应包括双端检测(DT)。考虑到webrtc使用的NLMS、NLP和CNG都属于经典算法范畴,故只做简略介绍,本文重点介绍webrtc的回声时延估计算法,这也是webrtc回声抵消算法区别一般算_webrtc aecm
文章浏览阅读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