CSS实例：用CSS制作网页像素画

(编辑：jimmy 日期: 2025/2/25 浏览：3 次 )
在cssplay网站看到有一组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"><b></b><em></em><i></i><strong></strong><span></span>

<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像素画欣赏<b>纯CSS像素画欣赏</b><strong>原创：冰极峰</strong></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">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="n1"></b><b class="n2"></b><b class="n3"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b><b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="b1"></b><b class="b2"></b><b class="b3"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="c1"></b><b class="c2"></b><b class="c3"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="d1"></b><b class="d2"></b><b class="d3"></b><b class="d4"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="e1"></b><b class="e2"></b><b class="e3"></b><b class="e4"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1"></b><b class="e_l2"></b><b class="e_l3"></b><b class="e_m1"></b><b class="e_r1"></b><b class="e_r2"></b><b class="e_r3"></b>

<b class="f1"></b><b class="f2"></b><b class="f3"></b>

<b class="f-r1"></b><b class="f-r2"></b><b class="f-r3"></b><b class="f-r4"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="e_l1 g1"></b><b class="e_l2 g2"></b><b class="e_l3 g3"></b><b class="e_m1 j1"></b><b class="e_r1 h1"></b><b class="e_r2 h2"></b><b class="e_r3 h3"></b>

<b class="i1"></b><b class="i2"></b><b class="i3"></b><b class="i4"></b><b class="i5"></b>

</div>

</div>

<div class="box">

<div class="panda1">

<b class="t1"></b><b class="t2"></b><b class="tm"></b><b class="tm1"></b><b class="t4"></b><b class="t5"></b>

<b class="m6"></b><b class="m7"></b><b class="m8"></b><b class="m9"></b>

<b class="b10"></b><b class="b11"></b><b class="b12"></b>

<b class="k0"></b><b class="k1"></b><b class="k2"></b><b class="k3"></b><b class="k4"></b><b class="k5"></b>

<b class="k6"></b><b class="k7"></b>

</div>

</div>

</div>

</div>

</div>

</body>

</html>
[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
上一篇：CSS常见的让元素水平居中显示的方法
下一篇：CSS实现绝对的完美圆角框