原创：纯手工打造CSS像素画--笨笨熊系列图标

纯手工打造CSS像素画--笨笨熊系列图标

作者：冰极峰转载请注明出处

在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！先看看预览图

图一

基本原理：
没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS像素画(冰极峰:http://www.cnblogs.com/binyong)</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
body{background:#555;}
#wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;}
#corner{position:relative;}
#corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;}
#corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}
#corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}
#corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}
#corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}
#corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;}
#corner a#b1{left:34px;top:3px;}
#corner a#b2{left:18px;top:18px;}
#corner a#b3{left:3px;top:33px;}
h1 {width:150px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;}
h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}
h1 strong{position:absolute;top:25px;left:30px;height:22px;}
h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}
.blog{background:#2f231a;}
.blog a:link,.blog a:visited{color:#fff;}
.context{height:380px;}
/*-----------------------------------像素画样式---------------------------------------------*/
.context{width:240px;margin:0px auto;}
.text{margin:0 auto;width:400px;height:100px;line-height:100px;}
.box{width:50px;height:50px;float:left;border-left:4px red solid;border-top:4px blue solid;border-bottom:4px orange solid;border-right:4px green solid;margin-right:20px;margin-bottom:20px;}
.context span,.context b,.context em,.context strong{display:block;font=weight:normal;font-style:normal; position:absolute;overflow:hidden;}
.panda1{width:41px;height:37px; position:relative;margin:5px auto;}
/*颜色方案，改变下列颜色可以改变整个熊猫的首色----------------------*/
/*熊猫脸的颜色*/
.t1,.t2,.t3,.t4,.tm1,.t5,.m6,.m9,.b12{background:#000;}
.tm,.m7,.m8,.b10,.b11{ border-color:#000;}
/*熊猫眼睛颜色*/
.e_l1,.e_r1,.e_l2,.e_r2,.e_l3,.e_r3{background:#000;}
.e_m1{border-color:#000;}
/*背景颜色*/
.box,.panda1,.tm,.m7,.m8,.b10,.b11,.e_m1{background:#fff;}
/*---------------------------------------------------------*/
/*脸轮廓----------------*/
/*上额*/
.t1{width:10px;height:8px;top:0px;left:2px;z-index:1;}
.t2{width:8px;height:8px;top:2px;left:0px;z-index:2;}
.tm{width:13px;height:2px;top:2px;left:12px;border-left:2px solid; border-right:2px solid;}
.tm1{width:17px;height:2px;top:4px;left:12px;}
.t4{width:10px;height:8px;top:0px;left:29px;z-index:3;}
.t5{width:8px;height:8px;top:2px;left:33px;z-index:4;}
/*脸两侧*/
.m6{width:2px;height:14px;top:14px;left:0px;}
.m7{width:2px;height:14px;border-top:4px solid;border-bottom:4px solid;top:10px;left:2px;}
.m8{width:2px;height:14px;border-top:4px solid;border-bottom:4px solid;top:10px;right:2px;}
.m9{width:2px;height:14px;top:14px;right:0px;}
/*下巴*/
.b10{width:28px;height:2px;border-left:2px solid;border-right:2px solid;top:32px;left:4px;}
.b11{width:20px;height:2px;border-left:4px solid;border-right:4px solid;top:34px;left:6px;}
.b12{width:20px;height:3px;top:36px;left:10px;}
/*眼睛*/
.e_l1,.e_r1{width:8px;height:8px;top:14px;}
.e_l2,.e_r2{width:6px;height:8px;top:16px;}
.e_l3,.e_r3{width:2px;height:4px;top:18px;}
.e_l1{left:9px;}
.e_l2{left:7px;}
.e_l3{left:5px;}
.e_m1{width:2px;height:4px;top:16px;left:17px;border-left:1px solid;border-right:2px solid;}
.e_r1{left:22px;}
.e_r2{left:27px;}
.e_r3{left:33px;}
/*鼻涕*/
.n1{width:1px;height:8px;top:24px;left:16px;background:#FCDAEC;}
.n2{width:1px;height:8px;top:24px;left:17px;background:#BC163C;}
.n3{width:2px;height:7px;top:24px;left:20px;background:#BC163C;}
/*第二幅画*/
.a1,.a6{width:4px;height:10px;top:24px;left:7px;background:#3399CC;}
.a2,.a5{width:2px;height:12px;top:24px;left:10px;background:#3399CC;}
.a3,.a4{width:4px;height:14px;top:22px;left:12px;background:#3399CC;}
.a4{width:4px;left:23px;}
.a5{width:3px;height:12px;left:27px;}
.a6{height:10px;width:4px;left:29px;}
.a7{width:8px;height:1px;top:30px;left:15px;background:#000;}
.a8{width:1px;height:2px;top:28px;left:19px;background:#000;border-bottom:1px #fff solid;}
/*第三幅画*/
.b1{width:10px;height:2px;top:30px;left:15px;background:#000;}
.b2{width:10px;height:2px;top:28px;left:13px;background:#fff;border-left:2px #000 solid;border-right:2px #000 solid;}
.b3{width:14px;height:2px;top:26px;left:4px;background:#fff;border-left:9px #DFC2D3 solid;border-right:9px #DFC2D3 solid;}
/*第四幅画*/
.c1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px #DFC2D3 solid;border-right:7px #DFC2D3 solid;}
.c2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px #DFC2D3 solid;border-right:5px #DFC2D3 solid;}
.c3{width:2px;height:10px;top:28px;left:19px;background:#000;}
/*第五幅画*/
.d1{width:22px;height:2px;top:26px;left:9px;background:#000;}
.d2{width:10px;height:6px;top:28px;left:13px;background:#D32147;border-left:2px #000 solid;border-right:2px #000 solid;}
.d3{width:6px;height:2px;top:34px;left:15px;background:#D32147;border-left:2px #000 solid;border-right:2px #000 solid;}
.d4{width:2px;height:4px;top:28px;left:19px;background:#000;}
/*第六幅画*/
.e1{width:18px;height:4px;top:26px;left:9px;background:#fff;border-top:2px #000 solid;border-left:2px #000 solid;border-right:2px #000 solid;}
.e2{width:14px;height:1px;top:32px;left:11px;background:#fff;border-left:2px #000 solid;border-right:2px #000 solid;}
.e3{width:14px;height:2px;top:33px;left:13px;background:#000;}
.e4{width:3px;height:4px;top:28px;left:15px;background:#000;}
/*第七幅画*/
.f1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px #DFC2D3 solid;border-right:7px #DFC2D3 solid;}
.f2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px #DFC2D3 solid;border-right:5px #DFC2D3 solid;}
.f3{width:12px;height:2px;top:32px;left:14px;background:#000;}
/*汗滴*/
.f-r1,.f-r2,.f-r3,.f-r4{background:#58B3D7;}
.f-r1{width:2px;height:25px;top:0px;right:6px;z-index:100;}
.f-r2{width:6px;height:18px;top:6px;right:4px;z-index:101;}
.f-r3{width:10px;height:12px;top:10px;right:2px;z-index:102;}
.f-r4{width:12px;height:6px;top:14px;right:1px;z-index:103;}
/*第八幅画*/
.g1{top:22px;}
.g2{top:20px;}
.g3{top:22px;}
.j1{top:24px;}
.h1{top:22px;}
.h2{top:20px;}
.h3{top:22px;}
.i1{width:2px;height:4px;top:18px;left:16px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;}
.i2{width:2px;height:2px;top:8px;right:11px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;}
.i3{width:2px;height:2px;top:10px;right:9px;border-left:4px #000 solid;border-right:4px #000 solid;background:#fff;}
.i4{width:2px;height:2px;top:14px;right:9px;border-left:4px #000 solid;border-right:4px #000 solid;background:#fff;}
.i5{width:2px;height:2px;top:16px;right:11px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;}
/*第九幅画*/
.k0{width:2px;height:4px;top:16px;left:17px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;z-index:15;}
.k1{width:6px;height:8px;top:14px;left:8px;border-left:9px #000 solid;border-right:9px #000 solid;background:#fff;z-index:12;}
.k2{width:12px;height:8px;top:16px;left:0px;border-left:14px #000 solid;border-right:14px #000 solid;background:#fff;z-index:11;}
.k3{width:16px;height:2px;top:24px;left:4px;border-left:8px #000 solid;border-right:8px #000 solid;background:#fff;z-index:16;}
.k4{width:2px;height:2px;top:18px;left:6px;background:#fff;z-index:17}
.k5{width:2px;height:2px;top:18px;right:6px;background:#fff;z-index:18}
.k6{width:10px;height:2px;top:30px;left:15px;background:#000;z-index:18}
.k7{width:10px;height:2px;top:32px;left:13px;border-left:2px #000 solid;border-right:2px #000 solid;background:#fff;z-index:18}
</style>
</head>
<body>
<div id="wrapper">
<div id="corner">
<a href="http://www.cnblogs.com/binyong" id="b1">冰</a>
<a href="http://www.cnblogs.com/binyong" id="b2">极</a>
<a href="http://www.cnblogs.com/binyong" id="b3">峰</a>
</div>
<h1>纯CSS像素画欣赏原创：冰极峰</h1>
<h2 class="blog">Blog地址:<a href="http://www.cnblogs.com/binyong">http://www.cnblogs.com/binyong</a></h2>
<div class="text">原理：利用背景色，边框，再加上定位，另外需要的是无比的耐心和细心。</div>
<div class="context">
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">






</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
<div class="box">
<div class="panda1">





</div>
</div>
</div>
</div>
</div>
</body>
</html>

posted @ 2009-03-09 00:34 Biny 阅读(3141) 评论(8) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

冰极峰

简单生活，简单生活！

原创：纯手工打造CSS像素画--笨笨熊系列图标

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (93)

随笔档案 (60)

文章档案 (15)

extend

other

好友链接

前端团队

资源链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论