一言不合敲代码（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 ...
随机推荐
- 图解JAVA对象的创建过程
前面几篇博文分别介绍了JAVA的Class文件格式.JVM的类加载机制和JVM的内存模型,这里就索性把java对象的创建过程一并说完,这样java对象的整个创建过程就基本上说明白了(当然你要有基础才能 ...
- JVM内存模型、指令重排、内存屏障概念解析
在高并发模型中,无是面对物理机SMP系统模型,还是面对像JVM的虚拟机多线程并发内存模型,指令重排(编译器.运行时)和内存屏障都是非常重要的概念,因此,搞清楚这些概念和原理很重要.否则,你很难搞清楚哪 ...
- DD_belatedPNG.js解决透明PNG图片背景灰色问题
<!--[]> <script type="text/javascript" src="http://www.phpddt.com/usr/themes ...
- VTK初学一，比较常见的错误2
我的开发环境: 系统:win8.1 QT:5.4.2MinGW版 VTK:6.3 按照教程生成一个球体显示在,Qt的QVTKWidget控件中,出现如下ERROR: ERROR: In D:\VTK6 ...
- Effective Java Second Edition --- Builder Pattern
如果类的构造器或者静态工厂中有多个参数,设计这种类时,Builder模式是一种不错的选择,特别是当大多数参数是可选的时候. 与使用传统的重载构造函数模式相比,使用Builder模式的客户端代码更易于阅 ...
- 【总结1】PhpStorm配置XDebug（远程）调试PHP
配置PhpStorm调试PHP 第一步:配置 XDebug 下载安装XDebug到本地环境,打开php.ini,参考配置如下: [XDebug] zend_extension = "D:\P ...
- PF_INET 和 AF_INET 的区别
在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0); 然后再绑定本地地址或连接远程地址时需要初始化sockaddr_in结构, ...
- 优化MySQL数据库性能的八大方法
本文探讨了提高MySQL 数据库性能的思路,并从8个方面给出了具体的解决方法. 1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就 ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- 周末娱乐一下--------恶搞windows小脚本
下面这是个循环DOS命令,使用了C中的goto语句 echo命令式输出命令 set命令是设置命令 var是变量,初始为0 :continue是一个用于goto的标示. %var%输出变量名,%var% ...