CSS實例：用CSS制作網頁像素畫

2024-07-11 08:44:25

字體：大中小

來源：轉載

供稿：網友

在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常見的讓元素水平居中顯示的方法