炫酷CSS
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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-top"></div> -->
<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/ 代码 ...
随机推荐
- 面试中遇到的iOS笔试题
1.浅复制和深复制的区别? 2.类别的作用(category)?继承和类别在实现有何区别? 3.类别(category)和类扩展(extension)的区别. 4.obc中的协议和java中的接口概念 ...
- 《SSM框架搭建》二.mybatis3，spring4整合
感谢学习文章来自http://www.cnblogs.com/xdp-gacl/p/4271627.html,spring3修改为spring4.还有提示驱动过期的问题,是由于使用了mysql-con ...
- 提高 ASP.NET Web 应用性能的 24 种方法和技巧
那性能问题到底该如何解决?以下是应用系统发布前,作为 .NET 开发人员需要检查的点. 1.debug=「false」 当创建 ASP.NET Web应用程序,默认设置为「true」.开发过程中,设置 ...
- 跨过几个坑，终于完成了我的第一个Xamarin Android App！
时间过得真快,距离上次发随笔又是一年多.作为上次发的我的第一个WP8.1应用总结的后继,这次同样的主要功能,改为实现安卓版APP.前几个月巨硬收购Xamarin,把Xamarin集成到VS里了,大大方 ...
- 尽快写完Math！
(1)Arranging Coins 解题思路一:这个想法是关于二次方程,得到算术和的公式是sum =(x + 1)* x / 2 所以对于这个问题,如果我们知道和,那么我们可以知道x =(-1 + ...
- npm install socket.io遇到的问题
解决方法: 输入 npm install socket.io 前,先执行下面 npm config set proxy "http://yourip:port" 生产的npm-de ...
- iOS支持Https
http://oncenote.com/2014/10/21/Security-1-HTTPS/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...
- 循序渐进Python3（十一） --4-- web之jQuery
jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的 ...
- centos7安装openoffice
[摘要:间接登录openoffice民网下载硬件包,但跳转的页里却不停挨没有开.末了只能正在末端里干活下了: 1. 挑选得当的版本:http://www.openoffice.org/download ...
- CTO对话：云端融合下的移动技术创新
云端融合真的来了?快听CTO们怎么讲云端融合下,技术创新怎么破? 快听CTO箴言 云喊了很多年,对于很多普通的技术人,心中有很多疑问:云端融合到底意味着什么,对公司的技术体系有什么影响,未来又会走向 ...