炫酷CSS

<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">

.face {
/* top: 100px; */
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;
z-index: 10;
background: #f3f3f3;
overflow: hidden;
}

/* 耳朵 */
.ear-wrap {
position: absolute;
width: 400px;
top: 100px;
left: 50%;
margin-left: -200px;
}
.ear {
width: 160px;
height: 200px;
position: absolute;
top: -22px;
left: 0;
border: 2px solid #000;
background: #f3f3f3;
transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
border-radius: 4% 80% 0% 50%;
transition: all 1s;
}
.ear-wrap .right {
left: auto;
right: 0;
border-radius: 80% 4% 50% 0%;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
/* 头发 */
.hair {
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;
}
.eye-wrap .eye {
height: 100px;
width: 100px;
position: absolute;
}
.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;
/* margin: 0 auto; */
background: #000;
position: absolute;
left: 50%;
margin-left: -15px;
transition: all 1s;
}
.eye-wrap .eye-bottom {
height: 50px;
width: 160px;
border-radius: 50%;
position: absolute;
/* background: #000; */
margin-top: 50px;
border-top: 2px solid #000;
left: -30px;
background: #f6f7f2;
transition: all 1s;
}
.eye-wrap .right {
left: auto;
right: 0px;
}
.eye-red {
position: absolute;
height: 28px;
width: 70px;
background: red;
top: 34px;
/*top: 64px;*/
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 1.5s; */
transition: all 0.1s ease-in 0.2s;
}
/* 鼻子 */
.nose {
width: 30px;
height: 10px;
/* background: #000; */
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 {
width: 50px;
height: 40px;
border-bottom: 4px solid #000;
border-right: 4px solid #000;
border-radius: 0% 40% 50% 20%;
margin-top: -26px;
position: absolute;
left: 0;
transition: all 1s;
}
.mouth-wrap .right {
border-bottom: 4px solid #000;
border-right: none;
border-left: 4px solid #000;
border-radius: 40% 0% 20% 50%;
position: absolute;
left: auto;
right: 0;
}

/* 胡子 */
.mustache-wrap {
height: 80px;
width: 380px;
position: absolute;
top: 190px;
z-index: 20;
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: 20px;
height: 6px;
background-color: #E53941;
border-radius: 50% 50% 50% 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;
}
/*鼠标hover样式*/
.container:hover .ear-wrap > div:first-child {
/* left: -10px; */
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
border-radius: 4% 80% 0% 60%;
transition: all 1s;
/*transition: transform 1s,left 1s;*/
}

.container:hover .ear-wrap > div:last-child {
/* right: -10px; */
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
border-radius: 80% 4% 60% 0%;
transition: all 1s;
/*transition: transform 1s,right 1s;*/
}
.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>
</head>
<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>
<div>TODO write content</div>

</body>
</html>

炫酷CSS的更多相关文章

炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. 但是,如 ...
纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
学习animate.css包含了一组炫酷、有趣、跨浏览器的动画
1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...
使用css实现炫酷的横屏滚动效果
炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...
炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
炫酷的 CSS 形状（值得收藏）
在今日头条中看到炫酷的 CSS 形状,就记录一下: 1.圆形 #circle { width: 100px; height: 100px; background: red; border-radius ...
百度前端技术学院2018笔记之利用 CSS animation 制作一个炫酷的 Slider
前言题目地址利用 CSS animation 制作一个炫酷的 Slider 思路整理首先页面包含三种东西一个是type为radio的input其实就是单选框二是每个单选框对应的label 三 ...
利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
炫酷的jQuery对话框插gDialog
js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码 ...

随机推荐

新版本eclipse Neon 4.6.1，登录git报401 没有权限
新版本eclipse Neon 4.6.1,登录git报401 没有权限经过查找原因竟然是新的eclipse需要进行update.比较坑,新版eclipse竟然需要先更新一下才能用! eclipse ...
UNIX网络编程——getsockname和getpeername函数
UNIX网络编程--getsockname和getpeername函数来源:网络转载 http://www.educity.cn/linux/1241293.html 这两个函数或者 ...
log4net日志在app.config中assembly不起作用
log4net 1.2.15.0日志在app.config中assembly不起作用,必须 1.手动调用方法log4net.Config.XmlConfigurator.Configure()来初始化 ...
leetcode-javascript
1. Largest Number For example, given [3, 30, 34, 5, 9], the largest formed number is 9534330. // wro ...
[vivado系列]Zynq开发常用文档
时间:2016.06.13 目的:阶段性总结学习的策略 ------------------------------------------------------------------------ ...
HTML Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用
你好,这个属性主要是设置浏览器优先使用什么模式来渲染页面的.常见写法如下:<meta http-equiv="X-UA-Compatible" content="I ...
Javascript浏览器对象模型BoM要点总结
BOM要点总结篇温故而知心!!学到的东东,必须要总结一下,方便自己,巩固自己.今天我为大家总结一下BOM当中的一些要点: 一.Windows对象 1.窗口的操作 windows对象对操作浏览器窗口非 ...
JOSN 为空数据的处理
for(var i=0,l=thisuserList.length;i<l;i++){ for(var key in thisuserList[i]){ if(thisuserList[i][k ...
位段(bitfield)
struct { unsigned int fieldA : 4 ; unsigned int fieldB : 2 ; unsigned int ...
centos配置epel
1.下载epel wget http://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 2.安装epel rpm -iv ...

炫酷CSS

炫酷CSS的更多相关文章

随机推荐

热门专题