【原创】纯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 ...
随机推荐
- [javaSE] 网络编程（TCP服务端客户端互访阻塞）
客户端给服务端发送数据,服务端收到数据后,给客户端反馈数据 客户端: 获取Socket对象,new出来,构造参数:String的ip地址,int的端口号 调用Socket对象的getOutputStr ...
- Java线程入门第二篇
Java线程通信方法 0.(why)每个线程都有自己的栈空间,我们要线程之间进行交流,合作共赢. 1.synchronized和volatile关键字 a) 看下面的synchronized关键字 ...
- Oracle数据库基本操作（一） —— Oracle数据库体系结构介绍、DDL、DCL、DML
一.Oracle数据库介绍 1.基本介绍 Oracle数据库系统是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或B/ ...
- COCI2017-2018-2 San
题意 有\(n \leq 40\)个节点,每个节点有权值\(H \leq 1e9\)和贡献\(v \leq 1e9\),从任意一个点可以向右跳到一个权值不小于它的节点,并获得该点贡献 可以从任意一个点 ...
- 51NOD1965：奇怪的式子
传送门 拆开变成 \[\prod_{i=1}^{n}\sigma_0(i)^{\mu(i)}\prod_{i=1}^{n}\sigma_0(i)^{i}\] 考虑 \(\prod_{i=1}^{n}\ ...
- 伪元素::before与::after的用法
::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after).今天主要讲讲这两 ...
- void()表达式结果是SyntaxError
void是一元运算符,他出现在操作数之前,操作数可以使任意类型,操作数会照常计算,但忽略计算结果并返回undefined. 因此在操作数具有副作用的时候使用void来让程序根据语义 console.l ...
- Apose.Cell导出的Excel数字格式正确显示
使用Apose.Cell导出Excel时假如导出的如上图:边框左上角有绿色三角形区域,选中某个区域会出现感叹号询问是否要将文本转换为数字 那么在代码中使用PutValue方法时,后面的bool参数设为 ...
- WinForm实现Rabbitmq官网6个案例-Topics
代码: namespace RabbitMQDemo { public partial class Topics : Form { private string exchangeName = &quo ...
- Android版APM地面站，支持直连和数传台连接
现在隆重介绍APM上的手机/平板地面站 andropilot官方链接在此http://www.diydrones.com/groups/705844:Group:1132500?xg_source=m ...