一言不合敲代码（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 ...
随机推荐
- hadoop集群安装无密码登录
http://blog.csdn.net/qiuchenl/article/details/7999044 hadoop安装:http://aperise.iteye.com/blog/2245547 ...
- R语言-Kindle特价书爬榜示例 & 输出HTML小技巧
博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html ---- 自从买了kindle以后,总是想要定期刷有没有便宜的书,amazon经常有些1元/2元 ...
- 反射的一些用法（WP8.1下）
我初步的理解:反射就是动态调用(dll)类. 比如某个dll有一个类,通过反射就可以知道它里面属性.方法,就可以实现调用. 确实,dll可以直接引用,但是如果遇到这种情况: 添加.删除功能同属一个Dl ...
- linuxmint 17没有vim
首先上软件管理器中安装vim,之后配置.vimrc文件 下面是从网上摘抄的配置文件: """""""""&qu ...
- 微信小程序想要的是无法监测的流量dark social
“微信小程序”将带来什么样的变化?就单单的是一个超级Web app?还是只是为了给大家手机节省一些空间?腾讯想要的是高达70%以上的“无法监测的巨大流量”,称之为“dark social”(暗社交). ...
- php的register_globals配置
1.需求 看ci文档的时候,看到register_globals,要了解这个配置的使用 2.分析 register_globals是PHP.ini里的一个配置,这个配置影响到php如何接收传递过来的参 ...
- 通过goto语句学习if...else、switch语句并简单优化
goto语句在C语言中实现的就是无条件跳转,第二章一上来就介绍goto语句就是要通过goto语句来更加清楚直观的了解控制结构. 我理解的goto语句其实跟switch语句有相似之处,都是进行跳转.不同 ...
- Windows中explorer（图形壳）
explorer是Windows程序管理器或者文件资源管理器. 用于管理Windows图形壳.(桌面和文件管理.) 删除该程序会导致Windows图形界面无法使用. explorer.exe进程是微软 ...
- JS 删除对象属性
updateNode: function(data) { if(data) { this.root[data.id] = data; } }, removeNodes: function(idsArr ...
- 命令行环境下简单实用的工具——重定向&管道
如果你对管道和重定向应用自如了,无需继续往下看.本文虽然以windows上cmd命令行环境演示,但同样适用于Unix/Linux等平台. 引言 关于管道和重定向,最初是在刘汝佳的<算法竞赛入门经 ...