一言不合敲代码（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 ...
随机推荐
- Gdb调试多进程程序
Gdb调试多进程程序 程序经常使用fork/exec创建多进程程序.多进程程序有自己独立的地址空间,这是多进程调试首要注意的地方.Gdb功能强大,对调试多线程提供很多支持. 方法1:调试多进程最土的办 ...
- 使用JSF框架过程中的若干典型问题及其解决方案
1.commandXxx点击后,不调用action中的方法: 原因1:xhtml后缀名的文件,最终也会转化为普通的html文件(这是熟悉JSF框架的关键.),commandXxx点击后不调用后台act ...
- Linux下ffmpeg的完整安装
最近在做一个企业项目, 期间需要将用户上传的视频转成flv格式或mp4格式并用flash插件在前端播放, 我决定采用ffmpeg (http://www.ffmpeg.org/ )实现. 当然以前也用 ...
- thwen 缓动框架
描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...
- 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 只用@property定义一个属性speed，子类不能直接用_speed，需要在interface的成员变量列表里写上_speed
//写法一: @interface Person : NSObject { } @property (nonatomic, strong) NSString *name; @end @implemen ...
- php 301 重定向 转自http://www.icoa.cn/a/475.html
内容简介 有时候我们的有多个域名指向同一个网站,或者我们更换了网站的网址,那么怎么样将原来网站的流量导入到新网址中呢,那么我们可以用301重定向的方式,而且这种方式是对搜索引擎比较友好的方式.如果首页 ...
- C/C++ 结构体内存对齐
内存对齐是指的是编译器在编译的时候总是会将结构体的元素的地址放在一些合适的位置使得CPU访问这些数据的效率变得更高.首先来看下面这个例子: struct A{ char a; char b; int ...
- 为什么operator>>(istream&, string&)能够安全地读入长度未知的字符串？
一般而言,实现"读入用户输入的字符串",程序中自然不能对用户输入的长度有所限定.这在C++中很容易实现,而在C中确没那么容易. 这一疑问,我在刚学C++的时候也在脑中闪现过:不过很 ...
- JS 中没有按地址（引用）传递，只有按值传递
很多人,包括我,受书本知识消化不彻底的影响,认为 JS 中参数有两种传递方式:数字.字符串等按值传递:数组.对象等按地址(引用)传递.对此种观点,我们要谨慎. var v1 = [] var v2 = ...