如何在CSS和HTML中创建花状结构

vkc1a9a2  于 2023-05-02  发布在  其他
关注(0)|答案(4)|浏览(150)

我试图创建一个像下面这样的图像使用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个花瓣围绕中心圆？

css

4条答案

按热度按时间
blpfk2vs

blpfk2vs1#

您需要将每个花瓣的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>
赞(0）分享  回复(0）举报  2023-05-02
omvjsjqw

omvjsjqw2#

在其中复制8份.mid和.petal。然后将.mid s放置在彼此的顶部，其中z-index为1到8。接下来，逐步旋转每个.mid45deg（例如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>
赞(0）分享  回复(0）举报  2023-05-02
hi3rlvi2

hi3rlvi23#

如果你想要一个简单的解决方案，你可以依靠一个元素和渐变来实现结果。
调整代码中的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>
赞(0）分享  回复(0）举报  2023-05-02
6rvt4ljy

6rvt4ljy4#

.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>
赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com