代码之家 › 专栏 › 技术社区 › Kourtney Kearney

如何在css和html中创建花状结构

css html

Kourtney Kearney · 技术社区 · 3 年前

我正试图使用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个花瓣围绕中心圆?

2 回复 | 直到 3 年前

jla 3 年前

您需要设置 transform-origin 每个花瓣的中心。这个 transform origin 是每个花瓣将围绕其旋转的点。因此,如果将所有花瓣放置在花朵的边缘,并将变换原点设置为中心,则在应用时 transform: rotate() 对于每个花瓣,它们将围绕花朵的边缘旋转。

.wrap {
  width: 100%;
  height: 300px;
  position: relative;
}
.center {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background-color: rgba(20, 30, 255, 0.5);
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
}
.petal {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(20, 30, 255, 0.5);
  transform-origin: center 150px;
}
.petal:nth-child(1) {
  transform: rotate(45deg);
}
.petal:nth-child(2) {
  transform: rotate(90deg);
}
.petal:nth-child(3) {
  transform: rotate(135deg);
}
.petal:nth-child(4) {
  transform: rotate(180deg);
}
.petal:nth-child(5) {
  transform: rotate(225deg);
}
.petal:nth-child(6) {
  transform: rotate(270deg);
}
.petal:nth-child(7) {
  transform: rotate(315deg);
}
.petal:nth-child(8) {
  transform: rotate(360deg);
}

<div class="wrap">  
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  
  <div class="center"></div>
</div>

编辑以添加

执行 变换:旋转() 将旋转花瓣本身以及花瓣元素中的任何内容。如果内容不应该旋转,则必须使用三角法计算每个花瓣的位置,而不是围绕花的中心旋转花瓣。

事实上,8个等距的花瓣很容易做到,因为它们的位置是45°的倍数。

在本例中,花朵的中心位于 top: 50% 和 left: 50% .花心的半径为 100px ,通过使用勾股定理,我们可以计算 71px 从花的中心向左和向上将是它圆周上45°的点。要放置花瓣的中心,我们还需要考虑花瓣的宽度,即 50px 。

所有花瓣的完整示例如下:

.wrap {
  width: 100%;
  height: 300px;
  position: relative;
}
.center {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background-color: rgba(20, 30, 255, 0.5);
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
}
.petal {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(20, 30, 255, 0.5);
}
.petal:nth-child(1) {
  top: calc(50% - 71px - 50px);
  left: calc(50% + 71px - 50px);
}
.petal:nth-child(2) {
  top: calc(50% - 50px);
  left: calc(50% + 100px - 50px);
}
.petal:nth-child(3) {
  top: calc(50% + 71px - 50px);
  left: calc(50% + 71px - 50px);
}
.petal:nth-child(4) {
  top: calc(50% + 100px - 50px);
  left: calc(50% - 50px);
}
.petal:nth-child(5) {
  top: calc(50% + 71px - 50px);
  left: calc(50% - 71px - 50px);
}
.petal:nth-child(6) {
  top: calc(50% - 50px);
  left: calc(50% - 100px - 50px);
}
.petal:nth-child(7) {
  top: calc(50% - 71px - 50px);
  left: calc(50% - 71px - 50px);
}
.petal:nth-child(8) {
  top: calc(50% - 100px - 50px);
  left: calc(50% - 50px);
}

<div class="wrap">  
  <div class="petal">petal 1</div>
  <div class="petal">petal 2</div>
  <div class="petal">petal 3</div>
  <div class="petal">petal 4</div>
  <div class="petal">petal 5</div>
  <div class="petal">petal 6</div>
  <div class="petal">petal 7</div>
  <div class="petal">petal 8</div>
  
  <div class="center"></div>
</div>

zer00ne 3 年前

制作8份 .mid 和 .petal 在其中。然后定位 .mid s与 z-index 1至8。下一轮每轮 .mid 45deg 逐渐地(例如0、45、90、…315)。

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

section {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.stem {
  background: #35414d;
}

.petal {
  position: absolute;
  top: 180px;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(181, 169, 212, 0.5);
}

.m1 {
  z-index: 1;
}

.m2 {
  transform: rotate(45deg);
  z-index: 2;
}

.m3 {
  transform: rotate(90deg);
  z-index: 3;
}

.m4 {
  transform: rotate(135deg);
  z-index: 4;
}

.m5 {
  transform: rotate(180deg);
  z-index: 5;
}

.m6 {
  transform: rotate(225deg);
  z-index: 6;
}

.m7 {
  transform: rotate(270deg);
  z-index: 7;
}

.m8 {
  transform: rotate(315deg);
  z-index: 8;
}

<div class="flower">
  <section class="mid stem"></section>
  <section class="mid m1">
    <div class="petal"></div>
  </section>
  <section class="mid m2">
    <div class="petal"></div>
  </section>
  <section class="mid m3">
    <div class="petal"></div>
  </section>
  <section class="mid m4">
    <div class="petal"></div>
  </section>
  <section class="mid m5">
    <div class="petal"></div>
  </section>
  <section class="mid m6">
    <div class="petal"></div>
  </section>
  <section class="mid m7">
    <div class="petal"></div>
  </section>
  <section class="mid m8">
    <div class="petal"></div>
  </section>
</div>

Temani Afif 3 年前

如果你想要一个简单的解决方案,你可以依靠一个元素和梯度来实现结果。

调整 30% 30% 在代码中控制小圆的大小和应用于主元素的梯度的百分比来控制大圆的大小。

.flower {
  --c: rgb(255 0 0/50%); /* the color */
  width: 300px; /* the size */
  
  aspect-ratio: 1;
  display: grid;
  background: radial-gradient(var(--c) 45%,#0000 46%);
  overflow: hidden;
}
.flower::before,
.flower::after {
  content:"";
  grid-area: 1/1;
  --_g:/30% 30% radial-gradient(var(--c) 71%,#0000 72%) no-repeat;
  background:
   top  var(--_g),bottom var(--_g),
   left var(--_g),right  var(--_g);
}
.flower::after {
  transform: rotate(45deg);
}


body {
 margin: 0;
 min-height: 100vh;
 display: grid;
 place-content: center;
}

<div class="flower"></div>