【原创】纯CSS画黄金梅丽号！
代码如下
<!DOCTYPE html>
<!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>黄金梅丽号</title>
<style type="text/css">
body {
background-color: #74b7e4;
}
/* face */
.face {
position: absolute;
left: 50%;
margin-left: -175px;
top:20%;
width: 350px;
height: 350px;
border-radius: 50%;
border: 2px solid #3f200b;
z-index: 10;
background: #fbf8f1;
overflow: hidden;
}
/*eye*/
.eye-out{
position: relative;
margin-top: 25%;
}
.eye{
border: 1px solid #000;
width: 80px;
height: 80px;
border-radius: 50%;
display:flex;
justify-content:center;
align-items:center;
}
.left{
position: absolute;
left:60px;
}
.eye-in{
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: black;
}
.right{
position: absolute;
right:60px;
}
/*nose*/
.nose-out{
position: relative;
margin-top: 60%;
display: flex;
justify-content: center;
align-items: center;
}
.nose-down{
margin-top: -14%;
}
.nose-left{
height: 30px;
border-left: 2px solid black;
transform: rotate(-40deg);
position: relative;
left:-6.5px;
}
.nose-right{
height: 30px;
border-left: 2px solid black;
transform: rotate(40deg);
position: relative;
left:10.5px;
}
.nose-bottom{
position: relative;
top:25px;
left: -1px;
height: 30px;
border-left: 2px solid black;
}
.nose-bottom-left{
position: relative;
top:55px;
left:0.5px;
width: 100px;
height: 30px;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-radius: 80% 80% 80% 70%;
}
.nose-bottom-right{
position: relative;
top:55px;
left:2.5px;
width: 100px;
height: 30px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-radius: 80% 80% 80% 80%;
}
/*horn*/
.horn{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 100% 100% 100% 100%;
border-bottom: none;
position: relative;
left: 35px;
top: 3px;
background-color: #9c857F;
}
.horn-big{
transform:rotate(-30deg);
position: relative;
left: -10px;
top:40px;
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 100% 100% 100% 100%;
border-top: none;
background-color: #A08D86;
}
.horn-left{
position: relative;
top: 90px;
left: 32.5%;
}
.horn-right{
position: absolute;
top: 90px;
right: 32.5%;
}
.horn-link{
position: relative;
left: -50px;
top:-190px;
height: 215px;
width: 300px;
border-top: 1px solid black;
border-left: 1px solid black;
border-radius: 100% 100% 0 100%;
background-color: #B7A99C;
z-index: -5;
}
.hornbig-right{
transform:rotate(30deg);
position: relative;
left: 150px;
}
.horn2{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 100% 100% 100% 100%;
border-bottom: none;
position: absolute;
right: 35px;
top: 3px;
background-color: #9c857F; }
.horn-link2{
position: relative;
left: 50px;
top:-190px;
height: 215px;
width: 300px;
border-top: 1px solid black;
border-right: 1px solid black;
border-radius: 100% 100% 100% 0%;
background-color: #B7A99C;
z-index: -5;
}
</style>
</head>
<body>
<div class="container">
<!-- 脸 -->
<div class="face">
<div class="eye-out">
<div class="eye left">
<div class="eye-in"></div>
</div>
<div class="eye right">
<div class="eye-in"></div>
</div>
</div>
<div class="nose-out">
<div class="nose-left"></div>
<div class="nose-right"></div>
<div class="nose-bottom"></div>
</div>
<div class="nose-out nose-down">
<div class="nose-bottom-left"></div>
<div class="nose-bottom-right"></div>
</div>
</div>
<div class="horn-left">
<div class="horn-big">
<div class="horn"></div>
</div>
<div class="horn-link"></div>
</div>
<div class="horn-right">
<div class="horn-big hornbig-right">
<div class="horn2"></div>
</div>
<div class="horn-link2"></div>
</div>
</div>
</body>
</html>
鬼畜梅利号用纯css完成，主要有以下几个点：
一.布局
①position:relative/absolute;
②display:flex;
③overflow: hidden;
二.特殊形状
①border-radius
学到一个如何画
半圆边框
再结合一下transform等效果！
难度是真的不大，主要是练练手熟悉一下CSS属性！
哈哈哈哈，越看越觉得搞笑
【原创】纯CSS画黄金梅丽号！的更多相关文章
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 纯CSS画的基本图形
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 用纯CSS画大白
纯CSS打造网页大白知识点: 首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 8.17 纯css画一个着重号图标
今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20p ...
- 纯css 画气泡
我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...
- 纯CSS画WP8界面
我的手机是诺基亚920,13年4月份买的.工作之余,就想用css做一下WP8的界面效果,如上图所示.不做不知道,一做还挺难的.尤其是画那个QQ 的企鹅图标,太难画了.怎么画都不像. <!doct ...
随机推荐
- 1.Java设计模式-工厂模式
1．简单工厂模式(Factory Method) 常用的工厂模式是静态工厂模式,利用static修饰方法,作为一种类似于常见的工具类Utils等辅助效果,一般情况下工厂类不需要实例化. //1.定义一 ...
- 使用 NamedScope 扩展 Ninject 的 InRequestScope
背景 C#,Ninject,定期执行某计划任务.首先想到的是使用 Quartz 来安排计划任务,于是看是否有相应的集成.果然有:https://github.com/dtinteractive/Nin ...
- POJ 1611(并查集+知识)
并查集主要是两个过程,一个是并,一个是查 原理是用一个数组p[i]保存每个i的根节点,如果根节点一样则在同一个集合里,所以只有根节点p[i]=i; 查: int find(int x){return ...
- docker 安装PIL python 报错 IOError: decoder zip not available
按照网上得方法:安装依赖库:yum install freetype freetype-develyum install libjpeg libjpeg-develyum install zlib z ...
- Exception in thread "main" java.nio.channels.NotYetConnectedException
import java.nio.channels.AsynchronousServerSocketChannel; import java.nio.channels.AsynchronousSocke ...
- 线程（Thread）和异常
线程Thread 实现多线程有两种方式: 1.继承Thread类(本质也是实现Runnable接口的一个实例) Thread类源码 public class Thread implements Run ...
- lincode 题目记录6
the Duplicate Number 132 PatternFind 找重复的数字··直接暴力枚举是不行的···又超时提示·· 暴力枚举的写法· res=0 def findDuplicate( ...
- SQL导出到Excel 存储过程
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[p_exporttb]') and OBJECTPROPER ...
- sublime text 3中browsersync的使用
1.在项目所在位置右键选择Git Bash Here 2.输入 // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files &q ...
- Microsoft Visual Studio 2010下log4cplus的安装，集成，测试
原文:http://blog.csdn.net/eclipser1987/article/details/6904301 log4cplus是C++编写的开源的日志系统,功能非常全面,用到自己开发的工 ...