【原创】纯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 ...
随机推荐
- sql sever 执行较大的文件脚本
1.用管理员身份打开cmd工具 2.执行命令 osql -S localhost -U sa -P 123456 -i D:/test.sql -S 服务器地址 本地可简写 . -U 用户名 -P ...
- 撩课-Python-每天5道面试题-第6天
一. 函数的概念是什么? 在Python中如何定义?使用场景是什么? 概念 写了一段代码实现了某个小功能; 然后把这些代码集中到一块, 起一个名字; 下一次就可以根据这个名字再次使用这个代码块, 这就 ...
- java web工程web.xml介绍
转载自:http://blog.csdn.net/believejava/article/details/43229361 Web.xml详解: 1.web.xml加载过程(步骤) 首先简单讲一下,w ...
- C++输入输出流--<iostream>详解
C++输入输出流包含在头文件<iostream>中, 流的定义如下:通过设备驱动程序与键盘.屏幕.文件.打印机等进行交互, iostream 类提供与之交互的方法.输出流:输出流的对象是字 ...
- 【VS2012】F5不能自动编译新修改
VS2012正常使用时,如果文件有修改,按F5运行时,会自动对修改的文件进行重新编译.今天遇到的情况却并没有.度娘了下,网上有相同的问题,解决办法是“工具->选项->项目和解决方案-> ...
- MPU/SoC/Application Processor/Embedded OS
Everything has its principles and mechanisms which are designed by its creator and followed by its u ...
- Signal & Slot in Qt
Try your best to provide an mechanism to implement what you want. 1. All is generated by QT Framewor ...
- VS编译报错Error2019
1.对项目右键,属性,链接器,常规,附加库目录,查看lib的路径是否填全了,写对了. 2.是否对项目添加引用.
- JQuery学习---JQuery基础知识
JQuery介绍: [官网]http://jquery.com [参考API]http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本,JQuery的2版本不太支持 ...
- [Vijos 1768] 顺序对的值
顺序对的值 描述 给定一个序列a,a中任意两个元素都不等.如果i<j,且a[i]<a[j],则我们称a[i],a[j]为一个顺序对,这个顺序对的值是指a[i+1],a[i+2]…….a[j ...