利用VML在网页上绘制一幅逼真的梅花图

发布时间：2018-09-05 06:35:12 所属栏目：交互来源：站长网

导读：今天烈火给大家介绍的是一个特殊的网页特效，在本特效中要用到VML，在文中，作者使用VML在网页上绘制了一幅梅花图，尤其对于VML爱好者来说，可不能错过机会哟。关于VML VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化

　　今天烈火给大家介绍的是一个特殊的网页特效，在本特效中要用到VML，在文中，作者使用VML在网页上“绘制”了一幅梅花图，尤其对于VML爱好者来说，可不能错过机会哟。

　　关于VML

　　VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。>>>查看详细

　　看效果演示：

<html xmlns:v> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>梅花 - liehuo.net</title> <meta name="generator" content="Namo WebEditor"> <style> v:*{behavior:url(#default#VML);} </style> </head> <body> <v:group style="POSITION: absolute; WIDTH: 500px; DISPLAY: block; HEIGHT: 400px; TOP: 110px;lEFT: -16px" id=Canvas_Data coordsize = "500,400"> <v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 54px;lEFT: -495px" id=CPoly706 n"11" s"-495" coordsize = "300,300" fillcolor = "maroon" stroked = "f" strokecolor = "#ffacd6" path = "m830,73l808,73,781,48,767,10,771,-7,731,-6,748,28,748,38,757,64,780,83,802,100 xe"><v:fill type = "gradient" color2 = "black"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 40px;lEFT: -448px" id=CPoly786 n"29" s"-448" coordsize = "300,300" fillcolor = "maroon" stroked = "f" strokecolor = "#ffacd6" path = "m984,6l898,4,870,43,858,53,835,84,821,87,780,88,757,94,727,134,716,156,694,176,664,207,632,222,604,242,564,270,549,276,535,277,541,329,584,297,625,278,669,275 718,239,758,184,795,161,848,168,863,150,899,109,934,71,984,39 xe"><v:fill type = "gradient" color2 = "black"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -429px" id=CPoly366 n"15" s"-429" coordsize = "300,300" fillcolor = "black" stroked = "f" strokecolor = "#ffacd6" path = "m692,74l663,90,635,123,616,146,597,193,584,240,578,301,578,396,563,394,562,317,567,263,576,201,597,133,631,91,682,48 xe"><v:fill type = "gradientRadial" opacity = "52428f" color2 = "maroon"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer161 n"5" s="-1" coordsize = "300,300" filled = "f" fillcolor = "white" stroked = "f" path = "m398,216 c407,215,431,225,410,235,417,236,403,256,378,241,366,255,357,236,357,236,334,246,333,197,368,221,367,207,392,192,398,216e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -2px;lEFT: -1px" id=CPoly630 n"18" s"-1" s="-2" coordsize = "300,300" fillcolor = "black" strokecolor = "#a52a2a" path = "m456,142l456,186,453,222,454,248,444,299,433,309,426,332,408,352,381,360,336,421,367,362,381,348,402,342,416,319,437,273,440,234,437,206,435,168 xe"><v:fill type = "gradient" color2 = "maroon"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 0px;lEFT: 1px" id=CPoly642 n"17" coordsize = "300,300" filled = "t" fillcolor = "#a52a2a" strokecolor = "#a52a2a" path = "m376,348l362,345,335,337,313,322,308,316,304,294,295,261,292,264,296,279,299,294,303,313,303,321,302,329,314,338,331,351,353,355,368,362 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CPoly820 n"29" s="-1" coordsize = "300,300" fillcolor = "#a52a2a" strokecolor = "#a52a2a" path = "m303,319l288,303,269,292,268,295,291,315,276,326,267,336,253,347,236,355,226,361,214,362,203,371,189,383,168,406,157,423,150,432,150,437,171,410,194,388,212,374,232,366 272,341,275,341,273,355,266,368,270,367,282,340,292,325,304,329 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer186 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" strokecolor = "#ffacd6" path = "m365,212 c377,202,400,232,378,239,385,262,351,260,345,250,336,271,320,251,322,243,279,233,320,192,334,217,339,172,371,200,365,212e"><v:fill type = "gradientRadial" focus = "30%"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer612 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m294,175 c308,208,279,192,279,192,266,221,256,194,258,192,233,172,262,162,262,162,276,123,288,143,290,147,326,152,301,175,294,175e"><v:fill type = "gradient"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer348 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m173,287 c205,294,183,323,171,312,175,349,152,320,152,320,155,329,131,335,135,309,118,275,145,281,145,283,145,279,173,259,173,287e"><v:fill type = "gradientRadial"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer831 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m233,303 c226,304,255,267,264,305,293,316,270,336,261,330,268,365,243,340,243,340,228,358,223,336,224,329,201,301,231,296,233,303e"><v:fill type = "gradient"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer239 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m345,328 c363,328,374,362,344,360,344,397,326,374,326,374,321,393,306,387,310,363,306,370,284,349,315,327,310,322,338,278,345,328e"><v:fill type = "gradient"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -8px;lEFT: -5px" id=CBeizer742 n"3" s"-5" s="-8" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m197,191 c197,191,182,201,196,215,201,213,199,199,199,199,199,199,197,191,197,191e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer878 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m163,171 c158,171,157,182,157,182,157,182,165,190,171,183,172,175,169,171,163,171e"><v:fill opacity = ".5"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -12px;lEFT: 1px" id=CBeizer648 n"3" s="-12" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m113,210 c105,215,108,230,108,230,115,240,118,230,118,230,125,218,113,210,113,210e"><v:fill opacity = "6553f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -22px;lEFT: 3px" id=CBeizer448 n"3" s="-22" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m131,255 c119,256,123,273,127,273,128,270,132,265,132,265,136,259,131,255,131,255e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer469 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m309,266 c302,273,304,288,304,288,312,288,312,282,312,282,317,272,309,266,309,266e"><v:fill opacity = "6553f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 2px;lEFT: 3px" id=CBeizer291 n"3" coordsize = "300,300" filled = "t" fillcolor = "fuchsia" stroked = "f" path = "m405,303 c405,303,408,293,417,297,422,305,421,303,419,304,410,319,405,303,405,303e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer93 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m408,356 c416,362,409,379,409,379,409,379,405,379,403,370,401,364,408,356,408,356e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer558 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m335,405 c335,400,327,399,327,399,327,399,321,405,323,410,332,420,338,409,335,405e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer905 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m279,355 c279,355,289,359,281,374,278,374,275,369,275,369,274,359,279,355,279,355e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer312 n"3" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m226,398 c226,398,236,411,224,417,222,413,220,407,220,407,221,396,226,398,226,398e"><v:fill opacity = "13107f"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CPoly294 n"14" s="-1" coordsize = "300,300" fillcolor = "#a52a2a" stroked = "f" path = "m233,366l227,379,217,391,207,404,199,416,195,431,198,431,198,423,203,417,218,396,226,387,234,373,248,362,267,344 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 14px; HEIGHT: 52px; TOP: 0px;lEFT: 0px" coordsize = "14,52" fillcolor = "#a52a2a" strokecolor = "#a52a2a" path = "m225,388l225,388,225,389,225,390,225,391,225,392,226,393,226,394,226,395,226,396,226,397,225,398,225,397,224,397,224,396,224,395,224,394,224,393,224,392,224,391,224,390 224,389,223,389,223,388,223,387,223,386e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -17px;lEFT: -4px" id=CPoly427 n"14" s"-4" s="-17" coordsize = "300,300" fillcolor = "#a52a2a" stroked = "f" path = "m199,275l183,260,169,253,146,245,131,239,120,240,106,241,106,248,118,247,132,248,142,252,164,257,182,266,191,279 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CBeizer932 n"5" s="-1" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" path = "m203,378 c229,403,207,432,192,407,176,438,173,400,172,404,171,410,137,417,159,386,149,380,156,351,175,366,178,345,209,336,203,378e"><v:fill type = "gradientRadial"></v:fill></v:shape> <v:shape style="POSITION: absolute; WIDTH: 16px; HEIGHT: 10px; TOP: 0px;lEFT: 0px" coordsize = "16,10" filled = "f" fillcolor = "white" strokecolor = "#ffacd6" path = "m335,411l335,411,335,410,337,409,337,408,338,408,339,408,340,408,341,408,342,408,342,409,342,410,342,411,341,412,340,412,339,412,338,412,337,411,336,411,336,410,335,410e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 52px;lEFT: -464px" id=CBeizer661 n"5" s"-464" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m820,164 c820,164,830,165,827,181,826,186,810,184,810,184,810,184,792,177,792,177,786,166,799,160,799,160,799,160,820,164,820,164e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 59px;lEFT: -451px" id=CBeizer287 n"5" s"-451" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m726,122 c726,122,743,113,743,113,743,105,734,101,734,101,734,101,718,106,718,106,718,106,715,117,715,117,715,117,726,122,726,122e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: -459px" id=CBeizer644 n"4" s"-459" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m801,295 c802,302,800,308,800,308,800,308,777,328,777,327,777,326,776,303,777,294,785,292,800,285,801,295e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 41px;lEFT: -437px" id=CPoly740 n"7" s"-437" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m630,336l631,355,620,357,614,350,605,345,613,335,620,326 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -431px" id=CPoly408 n"7" s"-431" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m598,248l603,258,599,263,591,262,585,262,576,252,583,243 xe"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: -444px" id=CPoly154 n"6" s"-444" coordsize = "300,300" fillcolor = "yellow" stroked = "f" path = "m698,265l704,277,698,282,687,282,677,272,684,263 xe"><v:fill type = "solid"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 45px;lEFT: -446px" id=CPoly94 n"18" s"-446" coordsize = "300,300" fillcolor = "#f60" stroked = "f" path = "m685,265l683,266,685,267,689,272,692,275,695,275,696,272,699,272,699,270,695,271,695,269,698,268,697,266,693,271,692,270,695,265,692,264,691,269,689,269,685,265e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -1px;lEFT: 0px" id=CPoly41 s="-1" coordsize = "300,300" filled = "f" fillcolor = "white"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 7px;lEFT: -289px" id=CPoly542 n"24" s"-289" coordsize = "300,300" fillcolor = "#f90" stroked = "f" strokecolor = "#930" path = "m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 49px;lEFT: -433px" id=CPoly835 n"22" s"-433" coordsize = "300,300" fillcolor = "#f60" stroked = "f" path = "m587,252l590,255,592,255,594,253,598,253,598,250,594,251,592,251,595,250,596,248,596,247,594,247,592,248,592,249,591,249,592,246,593,244,590,245,590,248,589,249,586,246 584,245,583,246,587,252e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 2px;lEFT: -532px" n"25" s"-532" coordsize = "300,300" fillcolor = "#f90" stroked = "f" path = "m810,175l812,174,815,173,818,172,818,169,814,171,813,171,812,169,815,167,816,165,813,165,811,170,810,171,810,168,812,163,810,162,808,166,808,170,807,170,805,167,803,165 801,166,801,167,803,169,805,171,807,173,810,175e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 56px;lEFT: -465px" n"25" s"-465" coordsize = "300,300" fillcolor = "#f90" stroked = "f" path = "m810,175l812,174,815,173,818,172,818,169,814,171,813,171,812,169,815,167,816,165,813,165,811,170,810,171,810,168,812,163,810,162,808,166,808,170,807,170,805,167,803,165 801,166,801,167,803,169,805,171,807,173,810,175e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 44px;lEFT: -438px" n"24" s"-438" coordsize = "300,300" fillcolor = "#f90" stroked = "f" strokecolor = "#930" path = "m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 42px;lEFT: 100px" n"5" coordsize = "300,300" fillcolor = "fuchsia" stroked = "f" strokecolor = "#ffacd6" path = "m365,212 c377,202,400,232,378,239,385,262,351,260,345,250,336,271,320,251,322,243,279,233,320,192,334,217,339,172,371,200,365,212e"><v:fill type = "gradientRadial" focus = "30%"></v:fill></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: 99px;lEFT: -359px" n"5" s"-359" coordsize = "300,300" filled = "t" fillcolor = "yellow" stroked = "f" path = "m820,164 c820,164,830,165,827,181,826,186,810,184,810,184,810,184,792,177,792,177,786,166,799,160,799,160,799,160,820,164,820,164e"></v:shape><v:shape style="POSITION: absolute; WIDTH: 300px; HEIGHT: 300px; TOP: -68px;lEFT: -169px" n"24" s"-169" s="-68" coordsize = "300,300" fillcolor = "#f90" stroked = "f" strokecolor = "#930" path = "m616,344l620,347,621,347,623,346,628,346,628,344,626,343,623,344,622,343,624,341,626,339,624,338,621,341,621,342,620,342,620,341,622,335,621,334,619,337,618,341,618,343 614,337,612,334,611,336,613,338,616,344e"></v:shape></v:group></v:group> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!