【原创】纯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 ...
随机推荐
- 自己动手写HashMap
HashMap是结合队列和链表各自的优点,创造的一种在查询和修改间取得性能平衡的一种集合! MyMap接口: package self; //接口 public interface MyMap { p ...
- python学习之老男孩python全栈第九期_day024知识点总结——单继承、多继承
一. 单继承 class A:pass # 父类,也叫基类,也叫超类 class B:pass # 父类,也叫基类,也叫超类 class AB_son(A,B):pass # 子类,也叫派生类 cla ...
- PHP学习笔记（一） ---- PHP简介以及基本语法
PHP 一.PHP 简介 PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点, 利于 ...
- 什么是首字节时间（TTFB）
第一字节响应时间(TTFB)=从发送请求到WEB服务器的时间+WEB服务器处理请求并生成响应花费的时间+WEB服务器生成响应到浏览器花费的时间测量第一字节响应时间(TTFB)的工具:http://ww ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
- css取消双击选中文字
在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好. 这个时候就用到了 user-select:none; 属性. 因为存在 ...
- How To Secure Apache with Let's Encrypt on Ubuntu (Free SSL)
Introduction This tutorial will show you how to set up a TLS/SSL certificate from Let's Encrypt on a ...
- 【问题：发现与解决】angularJs指令在dijit控件中的使用
由于公司主要用的JS框架是DOJO,最近又运用了angularJs.因此,不可能避免的遇到dojo控件和angular指令(directive)共用时遇到的一些问题,问题如下: <input ...
- MUI框架-10-MUI 数据交互-跳转详情页面
MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...
- Teamviewer 手机端怎么使用右键-已解决
Teamviewer 手机端怎么使用右键 可能很多人和我一样,关掉了那个提示,然后记不住操作 怎么控制电脑使用右键? 长按就可以了 拖到指定地点,然后长按不送,就会出来电脑右键菜单