看到这个标签蛮好玩的，做个小练习，哈哈虽然画的略丑~~ html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <head><br /> <title></title><br /> <meta charset="utf-8"><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> svg{position: absolute;}<br /> .rect1{</p> <p> transform: rotate(45deg);<br /> width: 150px;height: 150px;<br /> }<br /> .rect2{width: 210px;height: 200px;}<br /> </style><br /> </head><br /> <body><br /> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" style="border:1px solid red; margin:100px 400px;"></p> <p> <!– 草地 –><br /> <ellipse cx="250" cy="365" rx="200" ry="100" style="fill:green;stroke-width:1;stroke:rgb(0,0,0);z-index:8"/><br /> <!– 房子 –><br /> <rect x="175" y="-170" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);z-index:1" class="rect1"/><br /> <rect x="139" y="109" style="fill:rgb(0,255,255);stroke-width:1;stroke:rgb(0,0,0);z-index:10" class="rect2"/></p> <p> <!– 门 –><br /> <ellipse cx="245" cy="295" rx="70" ry="100" style="fill:red;stroke-width:1;stroke:rgb(0,0,0);z-index:11"/><br /> <ellipse cx="245" cy="305" rx="62" ry="91" style="fill:#fa7b47;stroke-width:1;stroke:rgb(0,0,0);z-index:9"/><br /> <line x1="243" y1="214" x2="243" y2="310" style="stroke:rgb(0,0,0);stroke-width:1;"/><br /> <rect x="140" y="310" style="fill:green;width: 210px;height: 92px;z-index:2"" /><br /> <!– 眼睛 –><br /> <ellipse cx="200" cy="160" rx="20" ry="30" style="fill:#fff;stroke-width:1;stroke:rgb(0,0,0);z-index:12" /><br /> <!– <ellipse cx="200" cy="160" rx="12" ry="20" style="fill:#000;stroke-width:1;stroke:rgb(0,0,0);z-index:13" /> –><br /> <ellipse cx="285" cy="160" rx="20" ry="30" style="fill:#fff;stroke-width:1;stroke:rgb(0,0,0);z-index:12" /><br /> <!– <ellipse cx="285" cy="160" rx="12" ry="20" style="fill:#000;stroke-width:1;stroke:rgb(0,0,0);z-index:13" /> –></p> <p> <!– 草地阴影 –><br /> <defs><br /> <filter id="f1" x="0" y="0"><br /> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /><br /> </filter><br /> </defs><br /> <ellipse cx="250" cy="395" rx="205" ry="80" stroke="green" stroke-width="1" fill="green" filter="url(#f1)" style="z-index:8"/></p> <p> <!– 花 –><br /> <defs><br /> <filter id="f2" x="0" y="0"><br /> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /><br /> </filter><br /> </defs><br /> <ellipse cx="285" cy="350" rx="8" ry="8" fill="#ff7182" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="1.5s" fill="freeze" from="8" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="1.5s" fill="freeze" from="8" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="140" cy="400" rx="10" ry="10" fill="#ff7182" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="2.5s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="2.5s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="170" cy="340" rx="5" ry="5" fill="#f551bd" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="5" to="1" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="5" to="1" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="350" cy="400" rx="10" ry="10" fill="#f35035" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="0.5s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="0.5s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="380" cy="320" rx="11" ry="11" fill="#ff7182" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="4s" fill="freeze" from="11" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="4s" fill="freeze" from="11" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="100" cy="350" rx="12" ry="12" fill="#ff7182" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="1s" fill="freeze" from="12" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="1s" fill="freeze" from="12" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="220" cy="400" rx="10" ry="10" fill="#f551bd" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="10" to="3" repeatCount="indefinite"/><br /> </ellipse><br /> <ellipse cx="280" cy="420" rx="9" ry="9" fill="#f35035" filter="url(#f2)" stroke="#f31daa"><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="9" to="2" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="9" to="2" repeatCount="indefinite"/><br /> </ellipse></p> <p> <!– 眼睛动画 –><br /> <ellipse id="rec" cx="200" cy="160" rx="12" ry="20" style="fill:#000;stroke-width:1;stroke:rgb(0,0,0);z-index:13" ><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="12" to="15" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="20" to="1" repeatCount="indefinite"/><br /> </ellipse></p> <p> <ellipse cx="285" cy="160" rx="12" ry="20" style="fill:#000;stroke-width:1;stroke:rgb(0,0,0);z-index:13" ><br /> <animate attributeName="rx" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="12" to="15" repeatCount="indefinite"/><br /> <animate attributeName="ry" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="20" to="1" repeatCount="indefinite"/><br /> </ellipse></p> <p> </svg><br /> </body><br /> </<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>>
前端开发者
970106_lzh 2年前 (2021-01-08)说：
huihui 2年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册