如何在 css 和 html 中创建花状 struct

发布于04月29日

我正在try 使用HTML和CSS的组合来创建一个如下所示的图像，但我似乎无法让"花瓣"绕着中间旋转.

以下是我的代码:

.flower{
  height: 600px;
  width: 600px;
  margin: 20px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  position:  relative;
}

.mid{
  width:  200px;
  height: 200px;
  border-radius:  50%;
  background: #35414d;
  z-index:  4;
}

.petal{
  position:  absolute;
  left: 40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:  #b5a9d4;
}

.petal.p1 {
  transform: rotate(22.5deg);
   z-index: 5;
}

.petal.p2 {
  transform: rotate(50deg);
   z-index: 5;
}

.petal.p3 {
  transform: rotate(100deg);
   z-index: 5;
}

<div class="flower" >
<div class="mid"></div>
  <div class="petal p1"></div>
  <div class="petal p2"></div>
  <div class="petal p3"></div>
  <div class="petal p4"></div>
  <div class="petal p5"></div>
  <div class="petal p6"></div>
  <div class="petal p7"></div>
  <div class="petal p8"></div>
</div>

什么变换值最适合使8个花瓣围绕中心圆？

.container { position: relative; width: 200px; height: 200px; margin: 50px auto; } .big-circle { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background-color: rgba(135, 206, 235, 0.55); } .small-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background-color: rgba(135, 206, 235, 0.55); } .small-circle:nth-child(1) { transform: translate(-50%, -80%) rotate(36deg) translate(0, 60px) rotate(-36deg); } .small-circle:nth-child(2) { transform: translate(-50%, -80%) rotate(72deg) translate(0, 60px) rotate(-72deg); } .small-circle:nth-child(3) { transform: translate(-50%, -80%) rotate(108deg) translate(0, 60px) rotate(-108deg); } .small-circle:nth-child(4) { transform: translate(-50%, -80%) rotate(144deg) translate(0, 60px) rotate(-144deg); } .small-circle:nth-child(5) { transform: translate(-50%, -80%) rotate(180deg) translate(0, 60px) rotate(-180deg); } .small-circle:nth-child(6) { transform: translate(-50%, -80%) rotate(216deg) translate(0, 60px) rotate(-216deg); } .small-circle:nth-child(7) { transform: translate(-50%, -80%) rotate(252deg) translate(0, 60px) rotate(-252deg); } .small-circle:nth-child(8) { transform: translate(-50%, -80%) rotate(288deg) translate(0, 60px) rotate(-288deg); } .small-circle:nth-child(9) { transform: translate(-50%, -80%) rotate(324deg) translate(0, 60px) rotate(-324deg); } .small-circle:nth-child(10) { transform: translate(-50%, -80%) rotate(360deg) translate(0, 60px) rotate(-360deg); } .small-circle:nth-child(11) { transform: translate(-50%, -80%) rotate(36deg) translate(0, 60px) rotate(-36deg); }

<div class="container"> <div class="big-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> <div class="small-circle"></div> </div>

如何在 css 和 html 中创建花状 struct

推荐答案

Html相关问答推荐

如何让一个动态列表以网格方式水平显示

我能阻止浏览器跨跨区边界折叠空格吗？

损坏的可点击html邮箱签名

覆盖垫子中的边框底部 Select

Tailwind CSS：overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

SCSS动画错误：心脏在页面刷新时启动动画，原因是：Checked和：Not(：Checked) Select 器

CSS Grid：使网格行填充屏幕，将下一行推离屏幕

Bootstrap 5.3.2模式页脚左填充还是左边距？

有没有什么方法可以很容易地给一个SVG一个插框阴影？

与窗高匹配的响应式正方形网格

Chrome浏览器错误：上的主题验证判断https：//pagead2.googlesyndication.com/失败

如何使用css在响应图像后面添加形状？

Swift WkMessageHandler 消息不发送

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中？

在锥形渐变进度条内创建空白的问题

涉及短代码时如何在页面上定位元素？

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

所有幻灯片上的 Quarto RevealJS 标题

为什么我的动画会向 Moz Firefox 中的微调器添加人工制品？