【原创】纯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 ...
随机推荐
- Source not found ( Eclipse 关联源代码)
一.问题 有时候我们在查看源码时提示没有找到, 这时就需要我们手动关联源码 二.关联 首先需要根据提示下载对应的源代码文件 选择我们下载好的源码 三.修改/删除关联 如果需要重新切换源码 四.参考 j ...
- MVC 事物同时保存，更新数据库
本人小白一枚,第一次写博,主要用作笔记,怕以后忘记了,大神尙可路过,也可多多指教 事物用在同时保存更新数据时,及只要在事物块的范围内,有一个操作出错则事物块所有更新,保存等操作都不会执行 ...
- js事件队列
前面跟网友讨论到了JS的事件队列 ,对这个有了一些理解,事件队列我认为就是把一些不按顺序执行的事件放到队列里面,然后按照自己制定的顺序去执行,那么什么情况下会用到这个呢?我首先想到的是动画,动画是会执 ...
- JS实现省市联动效果
实现的效果为:当选择一个省的时候,会自动出现该省下的市级 效果图如下: <body> <div> <!--界面展示--> <span>省份:</s ...
- Spring Data MongoDB 级联操作
DBRef 方式关联 DBRef 就是在两个Collection之间定义的一个关联关系,暂不支持级联的保存功能 例子:一个Person对象有多个Book对象,一对多关系 实体Person public ...
- MvcForum中文版+PostgreSql源码下载
演示地址:http://bbs.hfenxiao.com 因为种处原因在家休假,闲来无事,便将去年关注的一个基于asp.net mvc论坛程序拿出来做了一些调整. 据说PostgreSql是世界上功能 ...
- 远景GIS云产品规划
远景GIS云平台在初期有过产品设计,随着研发工作的进行以及对GIS云的认知更进行一步,最近重新梳理了平台的产品规划,使以后的开发不至于走偏方向. GIS云平台的研发也是摸着石头过河,免不了有考虑不到的 ...
- Git 拉取Gitee仓库报错：“fatal: unable to access ''": Failed to connect to 127.0.0.1 port 1080: Connection refused”
1.报错信息: 2.本地查看是否Git使用了代理 git config --global http.proxy 3.取消代理 git config --global --unset http.prox ...
- numpy数组属性查看及断言
numpy数组属性查看:类型.尺寸.形状.维度 import numpy as np a1 = np.array([1,2,3,4],dtype=np.complex128) print(a1) ...
- shrio的知识储备
博客讲解; shrio的知识储备 shrio的简单认识 笔记整理地址: Shrio.pdf 下载 Shrio理论.doc 下载 Shrio知识储备.doc 下载 Shrio的知识储备 (一) S ...