CSS Picture
这仅仅是一次娱乐,没有任何商业价值,如果你发现了,请告诉我^^。
昨天和moyi聊天的时候,他提到国外那个用css画房子的。嗯,尽管没什么必要,但既然你打算用css来娱乐涂鸦,那理论上是没有css画不了的(只要你电脑够强劲)。
目前做了一个flash+php的css图像生成器,原理很简单,无非是把位图信息传到页面中,然后用css绘图。至于中间传送的过程,理论上使用xml是比较好的方法。可惜php的socket好像不太稳定,只好用数组代替了。
再次说明:这只是一次游戏,不要当真!!!
下面是用css画的moyi的头像,友情提示:请先保存打开的文档,内存过小者慎用:)
HTML:
-
<STYLE type=text/css> {
-
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; ZOOM: 1
-
}
-
BODY {
-
PADDING-TOP: 200px; TEXT-ALIGN: center
-
}
-
#RI_cssFace {
-
MARGIN: 0px auto; WORD-SPACING: 0px; FONT: 1px/1px Verdana, Arial, Helvetica, sans-serif; OVERFLOW: hidden; WIDTH: 40px
-
}
-
#RI_cssFace SPAN {
-
DISPLAY: block; FLOAT: left; FONT: 1px/1px Verdana, Arial, Helvetica, sans-serif; OVERFLOW: hidden; WIDTH: 1px; HEIGHT: 1px
-
}
-
</STYLE>
-
-
<DIV id=RI_cssFace></DIV>
-
<SCRIPT language=javascript>
-
var colorArray=['233239','19282f','1c2a33','1b2932','1a2b33','1a2b35','182a34','192b35','21323c','22333d','253741','253741','1e323b','1b2f38','1d313a','1e353d','243640','22343e','1e303a','1a2c36','182a34','182a34','20323c','2c3e48','2a3d44','182a2e','405254','b2c2c1','bfcbc9','c9d2cf','e0e4e3','e4e6e5','e2e7e3','e3e7e6','e5e6e8','e5e5e7','ededef','e9e9e7','eaebe6','edeee8','132229','0b1a21','0f1d26','0d1b24','0a1b23','0a1b25','0b1d27','0e202a','11232d','0d1f29','0a1c26','0a1c26','081a24','081c25','0a1e27','091d26','0c1e28','0b1d27','081a24','071923','081a24','081a24','091b25','0b1d27','15282f','1c2d34','2f4145','8a999c','c1cdcd','cad3d2','d8dcdb','e4e6e3','e1e6e2','e5e7e6','eaeaea','e4e4e6','e6e4e5','e9e8e6','edeee9','e9eae4','16252c','0d1c23','111f28','0e1c25','0b1c24','0c1d27','0e202a','11232d','081c23','071b22','081b22','061920','02151c','03161d','04171e','06171f','071a21','081b22','081b22','081b22','0b1e25','0b1e25','071a21','04171e','04151d','091a22','081921','1c2a33','667379','c2ccce','e8eeec','dce1dd','dce1dd','e2e4e1','e1e1e1','e7e5e6','ecebe9','e7e6e2','ecebe6','e8e9e3','16252c','0a1920','0d1b24','0b1922','0a1b23','0c1d27','0d1f29','0d1f29','0b1f26','0a1e25','081c23','091c23','0a1d24','0d1e26','0a1b23','06171f','02131b','04151d','04151d','03141c','05161e','06171f','071820','0a1b23','0a1b23','061721','0a1a27','051522','081420','5c676b','c8d1d0','e0e6e2','dfe4e0','e1e3e0','e5e5e3','e5e4e2','e3e2de','e5e4e0','e9e8e3','eae9e4','16252c','0a1920','0d1b24','0c1a23','0a1b23','0c1d27','0c1e28','0c1e28','0f232a','0e2229','0d2027','0c1f26','0f2028','11222a','11222a','111f28','0c1d25','0a1b23','071820','04151d','02131b','01121a','05161e','0c1d25','071820','0b1c26','071726','081827','071520','15222a','576363','cbd6d2','ebefee','dbdddc','e4e4e2','e7e8e3','e4e3df','e9e8e4','e4e5e0','e9eae5','15242b','09181f','0f1d26','0d1b24','091a22','0a1b25','0b1d27','0b1d27','081b22','0b1e25','0b1e25','091c23','091a22','0a1b23','0c1d25','102129','14222b','13212a','101e27','101e27','0e1c25','08161f','05131c','08161f','071820','051620','0f212d','081825','051620','06151c','021013','505b5d','cbd1d1','ebefee','e1e3e0','dededc','e5e6e1','e3e4df','e6e6e4','ebedea','15242b','09181f','0e1c25','0c1a23','071820','081923','091b25','091b25','091a24','081923','061721','081923','0c1d27','0b1d27','081a24','071923','0c1a23','0c1a23','0c1a23','0f1d26','122029','0f1d26','091720','07151e','05161e','071820','03161d','04171e','081921','06171e','07161d','00030b','485052','d1d7d7','eaeeed','e0e2df','e6e8e5','e5e7e4','eaeceb','e5e9e8','16252c','08171e','0b1922','0a1821','06171f','081923','081a24','051721','0b1924','0b1924','0a1823','0a1b25','0c1d27','081a24','071923','081c25','0a1821','0a1821','08161f','091720','0d1b24','0f1d26','0c1a23','0a1821','05161e','02131a','001319','03161a','001319','16272e','5a6873','394752','00080b','939b9d','e2e8e8','e0e5e1','dbe0dc','dee3df','dce0df','e2e6e7','17252e','0a1821','0b1922','06171f','071820','071820','06171f','071820','091c23','091c23','091c23','081b22','091c23','0a1d24','081b22','05181f','071b24','091b1f','091718','08171a','03161c','021921','072027','031a22','061220','08161f','0f1e25','0a181b','131e22','3a474d','aec1c7','88a1a6','000410','5c636b','dbe3e5','d6e1db','d3ddd5','d8dfd8','e2e4df','e4e4e2','15232c','08161f','091720','05161e','06171f','06171f','06171f','071820','091a22','081921','071820','081921','091a22','081921','071820','06171f','061a25','081921','08171e','071820','041823','031722','061822','08171e','232524','4b4c47','57544d','4f463f','483d39','47423f','87908d','92a5a3','000912','3d444c','dadfe2','e2e8e6','e2e7e1','e8eae5','e4e5e0','e9e9e7','15232c','08161f','091720','05161e','06171f','05161e','05161e','06171f','071820','05161e','04151d','06171f','071820','05161e','04151d','05161e','061824','071724','071724','061927','071a29','071724','0e171e','202123','635d4f','9f9687','ae9b8a','9a7d6d','73554a','48362c','504f4a','6f7e79','0b1820','242d32','c8cdd0','e6e8e7','e5e5e3','eaebe6','eaeae8','ededeb','17252e','08161f','091720','05161e','05161e','05161e','04151d','05161e','06171f','04151d','03141c','04151d','05161e','04151d','03141c','04151d','071822','061822','061824','031927','071a29','0d1a23','222222','463b35','7e7262','aa9b88','bea893','ae927d','846759','5b473e','413d3a','363f3e','1e3233','516161','c9d3d4','e1e5e4','dededc','d2d4d1','b7bcb8','979d99','18262f','08161f','091720','05161e','05161e','04151d','04151d','04151d','04151d','05161e','05161e','04151d','04151d','05161e','05161e','03141c','07181f','05181e','041821','021621','061822','182023','3e352e','6f5c4d','907969','9d8772','a08c74','907a63','78614f','6c584f','665b59','484445','455e5b','869a98','aebdba','bac3c2','b7bdbb','a4aaa8','919c98','99a5a1','16242d','05131c','07151e','04151d','04151d','04151d','05161e','05161e','04151c','05161d','05161d','04151c','04151c','05161d','05161d','03141b','04161a','05171b','04171d','03161d','0e1b23','292a2c','594b40','8c715e','9f7c68','9f8169','947c62','897459','88725b','836c5c','89756a','72615a','687e7b','a9bcba','b3c2bf','becac8','bec8c7','bcc7c3','b1bdb9','bfcbc7','16242d','04121b','06141d','04151d','04151d','04151d','05161e','05161e','04151c','04151c','05161d','05161d','05161d','05161d','04151c','04151c','02151b','04151c','05161e','0a1821','151e27','333132','66534c','8a6d5d','95755e','947860','8d755d','9a846d','a88f7b','9b8170','917c6b','7c6b5b','899593','a5b1af','96a2a0','9faba9','a0aaa9','a3adac','9faaa6','a3aeaa','18262f','05131c','07151e','05161e','04151d','04151d','05161e','05161e','06151c','05141b','06151c','08171e','08171e','06151c','05141b','06151c','03151f','051620','07151e','0f1925','171e28','342f33','604d47','785a4f','856f5a','8d7863','998773','b8a392','b39c8e','978173','7e6e5e','6b604c','808483','bcc2c2','b7c0bf','b8c2c1','bdc7c6','b9c2c1','b5bbb9','b1b7b5','17242d','07151e','05161e','05161e','02151c','04151d','03141c','07151e','03161d','01151c','02161d','00161a','061b20','02151b','06151a','0a171d','05161e','001821','001a25','081621','16161e','3c3432','635346','7a5f4e','82745a','988b7a','9c8f86','837874','695e58','4b4138','6b6158','594c44','818b8c','adb8ba','9dabab','99a8a3','a9b4ac','a2aca4','9da9a5','a1afaf','17242d','07151e','04151d','05161e','02151c','05161e','03141c','07151e','06141d','04151d','06171f','04171e','06191f','03141b','06131b','05121a','04121b','00171d','001419','11181e','2d2729','4f423c','6f5c4d','8f7260','968571','716154','40332d','342b26','302720','40362c','85776c','9a897f','acb0af','bdc6c5','acbaba','acbbb8','a8b5ae','b0bbb3','a4afab','a7b3b1','18252e','07151e','04151d','05161e','03161d','05161e','04151d','07151e','07141c','05121a','06141d','05131c','05131c','05131c','09161f','07131f','07141c','05181c','0d1b1c','2f2e2c','53443f','6b594d','816a58','9d816c','806c61','53423b','493b38','69605b','595146','5a4c3f','8e7b6c','ceb7a9','bdb8b2','abadaa','a9b5b5','a8b8b7','acbbb6','adbab3','adb8b2','b8c3bf','18252e','08161f','04151d','05161e','03161d','06171f','04151d','07151e','06131b','05141b','07161d','07151e','06171f','04151f','06141f','05131e','071520','031519','1a2423','4b423d','67534a','7a6456','8a7363','947968','806c65','6d5b57','695b5a','584d47','4a4034','756653','8e7765','b19482','cfc1b6','c6c1bb','acb5b4','a0b0af','99a9a6','a1aea7','949f99','97a09b','18252e','08161f','04151d','05161e','03161d','06171f','04151d','07151e','05161d','05161d','03141b','04151c','05161e','04151d','03141c','061920','041421','01141a','1c2625','504742','6c554d','7f695c','8d7a6b','8f786a','79625a','513e38','40312c','3f322a','625545','8c7a66','947966','b0917f','ccb6a8','d2c8be','acaeab','a1afaf','abbab7','b3bfbb','b1bcb6','bac4bc','18252e','07151e','04151d','05161e','03161d','05161e','04151d','07151e','03181d','04171d','03141b','07161d','05141b','06151a','051419','05171b','02121f','05181f','1b2526','4e4540','745d55','897366','968374','9d8678','867062','857166','766259','655347','83705f','96806b','937865','a18474','c7ac9b','e4d3c9','c8c7c2','a9b2af','a6b2ae','9eaba4','a1aca6','9eaaa6','17242d','07151e','04151d','05161e','02151c','05161e','03141c','07151e','02151c','05161d','0d1a22','141f25','0f181d','131c21','111b1d','091315','09131d','0a191e','1a2322','514642','7d665e','927b6d','9f8876','ac9180','b6a289','bda893','af9888','957b6c','957b6a','8b7160','876b5d','b4988c','d8bbab','baa799','9c958d','abb0aa','acb6ae','b3beb6','a8b4b0','a7b6b3','17242d','07151e','05161e','05161e','02151c','04151d','03141c','07151e','05161e','07151e','111b24','181f27','14171e','24272c','2c3033','212526','151c24','101b1d','1e231f','594c46','846c62','987e6f','a78e78','b69782','b4a181','b39e83','b39a86','a18474','9e816f','917665','795f52','b9a197','b49485','755f52','7b7269','a2a39b','a2a9a1','9ea9a1','9daca7','a6b9b7','17242d','071820','04171e','00141b','031b1f','03181d','011219','06151c','001918','04161a','12161f','1f1e26','1a1720','232027','292428','4e454a','3c3233','2a2124','2c2324','554a46','776559','866f5d','9c836f','a88f7b','ad977f','a18b74','98816f','937d6f','988275','937d70','725f50','5a4736','5a4331','706051','a8a89e','aebdb8','a9b9b8','b1b9bb','a9adac','a5b2a9','18252e','08151e','091720','05161e','02151b','02151b','05161d','05161d','01161b','06131b','12161f','242329','201e21','251f1f','2f2523','433532','50413e','3c2e2d','332928','4b3d3a','625046','725c4e','877261','917e6d','907967','8b7464','866f5f','846d5f','927d6c','a5907f','9f8a77','8d7863','8a7266','7b625b','7f7872','92a19c','9baaa7','98a2a1','9da8a4','a6afaa','10212b','0a1823','0e1c25','09161f','04121b','06151c','05161d','03161c','02131b','06131c','0c131b','1e2126','2e2e2e','433e38','594b42','4e3a31','4d3a33','40312c','3e302d','4b3e38','5b4a40','655244','6b594b','6d5d50','745950','765e52','7a6355','7e6755','89735e','a08a75','b29c87','b09b86','836a65','4d2629','998b8a','b7c4bd','afbbb7','adb9b7','a2b3ad','abb1af','213e46','223b42','1c3039','071822','06131c','09161e','06151c','06171e','03151f','07151e','09131c','0a1318','1b2121','403f3b','72655f','745f5a','453631','3d2f2c','3a302e','443633','54433b','624f41','675446','69554a','6f574d','685044','695242','7a644f','8b7560','957f6a','8d7664','705949','462c2d','72444e','927f81','a6b3ac','a5b0ac','acbbb6','9eb3ac','b2b6b5','1e474b','1c3f45','16333b','071b24','05161e','08151e','06131b','09161e','01151c','00131a','081920','03141b','061319','11161a','312c30','44353a','312927','2d2727','312b2d','3d3331','54433b','654f42','6a5043','685143','664f41','6d5646','745d4b','7c6651','806957','7f685a','6c544a','482f28','53393c','653a43','776969','a9b8b1','a5aeab','97a39f','99aea7','a3a7a6','0b3239','002129','04222a','061e28','041620','05131c','07141c','08121b','061b20','02151c','05181f','00131a','03161d','03111a','0e121d','1c1924','282627','252429','242227','302a2a','4a3b34','5f493e','694f42','6c5146','6a5544','6d5847','6f5a49','715b4d','6f574b','6a5248','5e4540','4c332e','412726','705053','b8b4b1','a9bcb6','b6c0bf','b7c0bf','acbdb7','b7c2bc','162d3b','011925','061e2a','081e29','031720','01141b','07161d','08151d','00131a','04151d','091720','03141e','04171e','06191f','0c191f','181f27','2b2728','2b292c','222126','2c2628','423431','53403a','5d4942','5d4a43','5f4c3e','5e4b3d','5e4a3f','5d4940','5c453d','553e36','533d32','5b453a','684f48','82716a','a8b2aa','98b1ab','939f9f','9a9b9d','969f9a','91a298','192134','0c1729','0c1c2b','071b26','051922','04171e','04151c','06151c','071520','081420','08121e','09161f','05161d','011418','051717','132121','302825','312d2c','222023','252122','352b2a','413330','4b3c39','493b3a','4a382e','4d3a33','4d3a34','4a3530','533e39','614a42','6b5547','7d6857','685044','797166','a6b7ad','9fbab5','aab8b9','bab8bd','b0b5b1','a7bfb1','142833','041823','051b28','051b26','061a25','061920','05161d','07161b','05161e','05141b','051419','04151c','03161d','071820','09141a','1b2326','352a28','2f2725','252422','202020','222023','2a2627','2e2d2b','2f2f2d','3c2d28','3c2e2d','3f3131','4b3939','523a36','61493f','725c4f','625042','405246','8e9b91','b2bcb4','a4ada8','a3afab','a0b0ad','a2b2af','a8b7b4','132732','041823','051b28','041a25','061a25','05181f','05161d','06151c','05161e','04151c','06151a','04151c','03161d','04171e','081319','1a2225','302523','302826','292826','252324','252122','282222','2a2424','272622','292421','282629','26272c','24242c','242529','2b2b2d','292d2e','1d2527','1c3531','596d6b','9cacac','b5c5c5','adbdbc','a4b4b1','a4b1aa','a4aea6','142833','051924','061927','041a25','061a25','061822','05161e','04151c','03151f','04151c','06151a','06171e','051922','061920','061319','161e21','2f2323','322a28','312d2c','2f2b2a','332a2b','362c2b','342a28','2d2824','252120','24282b','18272e','071b24','071d28','0a202b','031b27','021e2c','06252a','0d2a32','1f3741','3d545c','687d82','9fb2b0','b3bcb7','b6b9b0','152733','061a25','071a28','061927','071b26','071923','05181f','05161e','041620','04151d','03141b','05181e','071b24','081a24','07141a','151d20','2e2224','302728','2e2828','2e2926','382c2c','413332','3c312f','342a28','29211e','282c2d','16252a','011a21','001b22','011c25','001a27','082231','062631','001c2a','092435','082432','08242f','536b6f','94a0a0','abb0ac','152733','071925','071a28','051826','071b26','071b26','051721','05161e','051721','071820','05161d','061920','061a23','061822','08151d','161e21','312728','302a2a','2d2825','2d2523','362a2a','3d2f2f','362c2b','2f2725','2a2426','282b30','11222a','041d24','041d24','021921','091b27','0b1d2b','011c27','09202e','082231','092636','001f2c','05222a','374b52','a6b5ba','152733','081a26','081b29','051826','081b29','081c27','061822','061822','041620','0b1c24','0c1d24','0d2027','091d26','061822','08151d','161e21','2c2324','2f2929','2f2b28','302b28','342a29','312728','272123','201e1f','242730','1b2531','071a29','021c29','041c28','051924','0c1e2a','081a28','0a1e29','0d212c','031926','001926','03232e','001f2a','04202b','3b535f','12232d','061824','061927','031624','061927','061a25','041622','051721','00121c','091a22','0a1b22','0c1f26','081c25','041620','05121a','10191e','272121','2c2827','2d2c28','302c29','32292a','282224','201e23','1e2126','22262f','111e27','041725','031a28','041a27','051924','091d28','061927','051826','061824','0b1d27','061d25','062329','092a31','072530','0b2733','20313b','152733','142735','112432','142735','152934','122631','142630','12242e','172830','14252c','15282f','152932','12262f','15222a','20292e','373131','373330','34332f','36322f','363030','302b2f','2c2d32','30373d','2d2f2e','1c2427','17252e','162832','15282f','15282f','15282f','132a32','152c3a','122533','172832','15282e','173034','163339','1b3941','284450'];var picStr="";
-
var len=colorArray.length;
-
for(var i=0;i<len;i++){
-
picStr+="<span style='background:#"+colorArray[i]+";'></span>";
-
}
-
var RI_cssFace=document.getElementById("RI_cssFace");
-
RI_cssFace.innerHTML=picStr;
-
</SCRIPT>
-
</BODY>
只是想知道
数组是哪来的
嗯,,,
用PHP的GD处理得来>?
PS:今天起,纯linux的OS,上来玩儿,,,
数组是flash取得的。