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的渐变、旋转、圆角等特性，进行绘图的。然而完全只考虑了火狐的效果，完全未考虑兼容问题，于是才有了各种各样的猫：

这是火狐猫

这是IE11猫

IE9猫~

IE8猫~

IE7猫~

代码未经优化，可能在方法上会有冗余~

用简单的代码画一些简笔形象，相信还是很有乐趣的。有空的时候大家也可以尝试一下。~~

DIV+CSS3制作哆啦A梦头像相关推荐

div+css制作哆啦A梦
纯CSS代码加上制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...
如何用手机HTML制作哆啦a梦,CSS3绘制哆啦A梦（带鼠标动画）
body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; top: 100px; } .head{ ma ...
css+html弄出哆啦a梦,祝儿童节快乐（DIV+CSS绘制哆啦A梦）
之前看到别人用DIV+CSS绘制大白,就顺手绘制了一个哆啦A梦,刚好昨天蓝胖子3D版上映,借此祝大家儿童节快乐. 效果图: 请在CHROME & FIREFOX查看 HTML [html] [ ...
纯CSS3画哆啦A梦
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>哆啦A ...
CSS3，哆啦A梦动画特效
1.效果图: 2.设计思想: (1)哆啦A梦整个有头部.脸部.左眼.右眼.鼻子.嘴部.围巾.胡须八个部分. 头部部分里面包含了脸部.左眼.右眼.鼻子.嘴部.胡须:左右眼里面有三层元素:眼睛的底色部分. ...
canvas 画哆啦A梦头像
正好最近学到了canvas,要做一个哆啦A梦,感觉做出来很可爱,想分享给大家,第一次写博客,有什么问题或者优化可以给我建议哦! 首先需要先建起画布 <canvas id="canvas ...
如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
c语言绘画哆啦a梦源码,简单壁纸制作-哆啦A梦
可爱的壁纸总是会受到大家的喜欢,那么如何制作一个简单的壁纸呢?跟着源码时代UI老师一起动起来吧! 最终效果预览: 使用软件:Adobe PhotoShop CC2017 方法步骤第一步:打开Adob ...
纯CSS制作加div制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

DIV+CSS3制作哆啦A梦头像

DIV+CSS3制作哆啦A梦头像相关推荐

最新文章

热门文章