今天, 小编将与大家分享 web 前端特效荟萃系列第 32 期, 喜欢把玩儿炫酷效果的小伙伴快快看过来 ^_^ , 希望大家喜欢呦~
第 32 期, 给大家分享一个使用 html 生成复活节兔子 SVG 图案效果, 相关代码如下:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>cloth</title>
- <style>
- svg {
- width: 100%;
- height: auto;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <svg version="1.1" baseProfile="full" width="800" height="800" viewbox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
- <defs>
- <style type="text/CSS">
- svg {
- background: rgb(255, 242, 119);
- }
- .main {
- fill: rgb(195, 195, 195);
- }
- .ears {
- fill: rgb(246, 224, 233);
- }
- .eyes {
- fill: rgb(50, 50, 50);
- }
- .nose {
- stroke: rgb(170, 95, 126);
- fill: transparent;
- stroke-width: 1;
- }
- </style>
- <pattern id="flower" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
- <!-- ears -->
- <ellipse cx="60" cy="25" rx="8" ry="22" class="main" transform="rotate(10 35 60)"/>
- <ellipse cx="40" cy="25" rx="8" ry="22" class="main" transform="rotate(-40 45 50)"/>
- <ellipse cx="60" cy="25" rx="6" ry="18" class="ears" transform="rotate(10 35 60)"/>
- <ellipse cx="40" cy="25" rx="6" ry="18" class="ears" transform="rotate(-40 45 50)"/>
- <!-- head -->
- <ellipse cx="50" cy="65" rx="22" ry="20" class="main"/>
- <!-- eyes -->
- <ellipse cx="38" cy="60" rx="2" ry="4" class="eyes"/>
- <ellipse cx="62" cy="60" rx="2" ry="4" class="eyes"/>
- <!-- nose -->
- <polyline points="45 68, 50 72, 55 68" class="nose"/>
- <line x1="50" x2="50" y1="72" y2="76" class="nose"/>
- </pattern>
- </defs>
- <rect id="bunny" fill="url(#flower)" width="800" height="800"/>
- </svg>
- </div>
- </body>
- </html>
在线演示: http://igeekbar.com/igclass/code/19eb544b-2d0e-4ae4-b48c-e83b36004dfc.htm
来源: http://igeekbar.com/igeekbar/post/1066.htm