使用HTML和CSS绘制花朵图案
<!DOCTYPE html><html><head> <title>使用HTML和CSS绘制花朵图案</title> <style> .flower { width: 200px; height: 200px; background-color: yellow; border-radius: 50%; position: relative; overflow: hidden; }
<pre><code> .petal { position: absolute; width: 100px; height: 200px; background-color: pink; border-radius: 50%; transform-origin: center center; }
.petal1 { transform: rotate(0deg); }
.petal2 { transform: rotate(45deg); }
.petal3 { transform: rotate(90deg); }
.petal4 { transform: rotate(135deg); }
.petal5 { transform: rotate(180deg); }
.petal6 { transform: rotate(225deg); }
.petal7 { transform: rotate(270deg); }
.petal8 { transform: rotate(315deg); } </style></head><body> <h1>使用HTML和CSS绘制花朵图案</h1> <p>这个例子展示了如何使用简单的HTML和CSS代码创建一个花朵图案。我们使用一个圆形作为花朵的中心，然后使用八个椭圆形的花瓣围绕中心旋转排列。</p> <h2>代码示例:</h2> <pre> <code>&lt;div class=&quot;flower&quot;&gt; &lt;div class=&quot;petal petal1&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal2&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal3&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal4&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal5&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal6&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal7&quot;&gt;&lt;/div&gt; &lt;div class=&quot;petal petal8&quot;&gt;&lt;/div&gt;&lt;/div&gt; </code> </pre> <h2>花朵图案:</h2> <div class="flower"> <div class="petal petal1"></div> <div class="petal petal2"></div> <div class="petal petal3"></div> <div class="petal petal4"></div> <div class="petal petal5"></div> <div class="petal petal6"></div> <div class="petal petal7"></div> <div class="petal petal8"></div> </div> <p>您可以通过修改CSS代码中的颜色、大小和旋转角度来自定义花朵图案。发挥您的创造力，尝试不同的设计！</p></body></html>
</code></pre>
原文地址: https://www.cveoy.top/t/topic/fcX 著作权归作者所有。请勿转载和采集!