一言不合敲代码（1）——DIV+CSS3制作哆啦A梦头像
先展示一下我的头像吧。
作为一个前端ER，我的头像当然不能是绘画工具画出来的。没错，这个玩意是由HTML+CSS代码实现的，过年的某一天晚上无聊花了一个小时敲出来的。来看看它原本的样子：
为什么会变成第一张图的样子呢。那个呆萌的线条猫其实是IE的杰作。
下面贴出源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3绘制机器猫头像</title>
<style type="text/css">
#head{
width: 460px;
height: 440px;
border: 2px solid rgb(41,102,123);
border-radius: 220px;
background-image: -moz-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
background-image: -webkit-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
}
#eyes{
position: relative;
top: 63px;
margin: 0 auto;
width: 207px;
height: 120px;
}
#lefteye,#righteye{
position: absolute;
display: inline-block;
width: 100px;
height: 120px;
border: 2px solid black;
border-radius: 50px;
background: white;
z-index: 3;
}
#righteye{
right: 0;
}
#lefteyeball,#righteyeball{
position: absolute;
top: 70px;
background: black;
width: 20px;
height: 20px;
border-radius: 10px;
}
#lefteyeball{
right: 5px;
top: 62px;
/*-moz-animation: leyeballMove 1s;*/
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#righteyeball{
left: 5px;
top: 62px;
/*-moz-animation: reyeballMove 1s;*/
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#face{
position: relative;
z-index: 2;
margin: 0 auto;
top: 13px;
width: 350px;
height: 280px;
border-radius: 230px;
border: 2px solid black;
background: white;
}
#nose{
position: relative;
top: 32px;
margin: 0 auto;
width: 41px;
height: 41px;
border: 2px solid black;
border-radius: 22px;
background-image: radial-gradient(11px 11px at 30px 17px,rgb(255,255,255),rgb(208,56,7));
}
#mustache{
position: relative;
top: 60px;
margin: 0 auto;
width: 307px;
height: 50px;
}
#leftmustache{
position: absolute;
left: 0;
}
#rightmustache{
position: absolute;
right: 0;
}
#lm1,#rm1{
width: 80px;
height: 3px;
background: black;
margin-bottom: 13px;
}
#lm2,#rm2{
width: 78px;
height: 3px;
background: black;
}
#lm3,#rm3{
width: 80px;
height: 3px;
background: black;
margin-top: 13px;
}
#lm1{
transform-origin: 70px 0;
transform: rotate(20deg);
}
#lm3{
transform-origin: 70px 0;
transform: rotate(-20deg);
}
#rm1{
transform-origin: 10px 0;
transform: rotate(-20deg);
}
#rm3{
transform-origin: 10px 0;
transform: rotate(20deg);
}
#line{
position: relative;
margin: 0 auto;
top: -18px;
height: 160px;
width: 3px;
background: black;
}
#mouse{
width: 300px;
height: 100px;
position: relative;
margin: 0 auto;
top: -82px;
overflow: hidden;
}
#mouseline{
position: relative;
top: -242px;
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 150px;
border: 3px solid black; }
#neck{
position: relative;
z-index: 10;
top: 5px;
margin: 0 auto;
width: 297px;
height: 30px;
border: 2px solid black;
border-radius: 16px;
background-image: -moz-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
background-image: -webkit-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
}
#ring{
position: relative;
top: 10px;
margin: 0 auto;
width: 50px;
height: 50px;
border:2px solid black;
border-radius: 50px;
background-image: radial-gradient(21px 21px at 30px 17px,rgb(255,255,179),rgb(188,182,24));
overflow: hidden;
}
#l1,#l2,#l3,#l4{
position: relative;
background: black;
}
#ring #l1{
top: 13px;
width: 100%;
height: 2px;
}
#ring #l2{
top: 16px;
width: 100%;
height: 2px;
}
#ring #l3{
margin: 0 auto;
top: 22px;
width: 16px;
height: 15px;
border-radius: 8px;
}
#ring #l4{
top: 8px;
height: 100%;
width: 3px;
margin: 0 auto;
} @-moz-keyframes leyeballMove{
0%{
right: 5px;
top: 62px;
}
25%{
right: 20px;
top: 90px;
}
50%{
right: 40px;
top: 95px;
}
75%{
right: 60px;
top: 90px;
}
100%{
right: 75px;
top: 62px;
}
}
@-moz-keyframes reyeballMove{
0%{
left: 5px;
top: 62px;
}
25%{
left: 20px;
top: 90px;
}
50%{
left: 40px;
top: 95px;
}
75%{
left: 60px;
top: 90px;
}
100%{
left: 75px;
top: 62px;
}
}
</style>
</head>
<body>
<div id="head">
<div id="eyes">
<div id="lefteye">
<div id="lefteyeball"></div>
</div>
<div id="righteye">
<div id="righteyeball"></div>
</div>
</div>
<div id="face">
<div id="nose"></div>
<div id="mustache">
<div id="leftmustache">
<div id="lm1"></div>
<div id="lm2"></div>
<div id="lm3"></div>
</div>
<div id="rightmustache">
<div id="rm1"></div>
<div id="rm2"></div>
<div id="rm3"></div>
</div>
</div>
<div id="line"></div>
<div id="mouse">
<div id="mouseline"></div>
</div>
</div>
<div id="neck">
<div id="ring">
<div id="l1"></div>
<div id="l2"></div>
<div id="l3"></div>
<div id="l4"></div>
</div>
</div>
</div>
</body>
</html>
当中主要用到了CSS3的渐变、旋转、圆角等特性，进行绘图的。 然而完全只考虑了火狐的效果，完全未考虑兼容问题，于是才有了各种各样的猫：
代码未经优化，可能在方法上会有冗余~
用简单的代码画一些简笔形象，相信还是很有乐趣的。有空的时候大家也可以尝试一下。~~
一言不合敲代码（1）——DIV+CSS3制作哆啦A梦头像的更多相关文章
- div+css制作哆啦A梦
纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...
- 哆啦A梦欺骗了你！浏览器CSS3测试遭质疑
首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好! ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)
话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...
- 好程序员分享DIV+CSS3和html5+CSS3有什么区别
DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...
- Emmet的HTML语法（敲代码的快捷方式）
Emmet的HTML语法(敲代码的快捷方式) 版权声明:本文为网上转载. 所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...
- 积极主动敲代码，使用Junit学习Java程序设计
积极主动敲代码,使用JUnit学习Java 早起看到周筠老师在知乎的回答软件专业成绩很好但是实际能力很差怎么办?,很有感触. 从读大学算起,我敲过不下100本程序设计图书的代码,我的学习经验带来我的程 ...
- div+css3实现漂亮的多彩标签云，鼠标移动会有动画
div+css3实现漂亮的多彩标签云,鼠标移动会有动画 点击运行效果 <style> .dict { margin: 20px 0;clear:both ;text-align:left; ...
- 使用Alcatraz为Xcode安装XActivatePowerMode插件, 从此敲代码逼格大大滴~
Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的 插件.模版以及颜色配置的工具. 关于Alcatraz的安装,这里有一篇不错的博文,请参考安装:http://www.cnb ...
随机推荐
- 10月24日上午PHP面向对象
面向对象 程序分为两种,一种是面向过程的,另一种是面向对象的.之前的学的都是面向过程的,按部就班的一步一步的按照顺序往下走. 面向对象: 1.什么叫做对象 一切皆为对象(一个对象由一组属性和有权对这些 ...
- 理解Kalman滤波的使用
Kalman滤波简介 Kalman滤波是一种线性滤波与预测方法,原文为:A New Approach to Linear Filtering and Prediction Problems.文章推导很 ...
- 深入理解javascript原型和闭包（8）——简述【执行上下文】上
什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时, ...
- 【06-18】CentOS使用笔记
使用中文输入法 搜狗输入法只支持Ubuntu sudo yum install "@Chinese Support" [系统]--->[首选项]--->[输入法]--& ...
- 布局之按钮的图片分辨率--Android Studio
在布局页面,想把取消按钮和确认钮大小一致,刚开始想法是错的,不用在控制层设置,也不用在布局层压缩图片,有两个方法法: 1.直接用美图秀秀“尺寸”功能,修改成另一按钮一样的分辨率. 2.设置按钮相同高度 ...
- JDK source 之 LinkedHashMap原理浅谈
注:本文参考JDK1.7.0_45源码. LinkedHashMap是基于HashMap实现的数据结构,与HashMap主要的不同为每个Entry是使用双向链表实现的,并且提供了根据访问顺序进行排序的 ...
- Jenkins的使用
参考: http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.html
- Java poi读取,写入Excel,处理row和cell可能为空的情况
首先需要导入包 import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.poifs.filesystem.NP ...
- MySql连接数据库和操作(java)
package org.wxd.weixin.util; import java.sql.Connection;import java.sql.DriverManager;import java.sq ...
- php时区问题
今天遇到一个很诡异的问题: 数据库中存的日期信息为时间戳,用php取出数据库中的日期信息,并用date()函数转化为“Y-m-d”后,发现和mysql格式化函数Date_Format()处理后的结果不 ...