【发布时间】：2021-01-20 05:36:18
【问题描述】：
我基本上需要在图像中创建这个设计。我知道它可以用 CSS 来实现，但我不知道怎么做。我尝试用谷歌搜索它，但我只能找到像这个这样的精心设计的“太阳”设计，这对我目前的理解来说实在是太多了。
https://codepen.io/zmmbreeze/pen/guLfC
我已经创建了这样的中心部分（使用 sass）：
&__count {
width: 12rem;
height: 12rem;
color: $lightPurple;
border: $border;
font-size: 4rem;
font-weight: 500;
border-radius: 100%;
@include centerContent;
}
如何添加“光线”？
这是我试图提取的内容：
.count-down {
position: relative;
margin: auto;
@include centerContent;
&__count {
width: 12rem;
height: 12rem;
color: $lightPurple;
border: $border;
font-size: 4rem;
font-weight: 500;
border-radius: 100%;
@include centerContent;
}
&__go {
width: 15rem;
height: 15rem;
color: white;
border: 1px solid white;
font-size: 4rem;
font-weight: 500;
border-radius: 100%;
@include centerContent;
}
}
.sun-light b,
.sun-light s {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 12%; /* 100*30/100=18.75 */
background: #fed65b;
}
.sun-light s {
top: auto;
bottom: 0;
}
.sun-light:nth-child(10n + 2) {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-o-transform: rotate(18deg);
-ie-transform: rotate(18deg);
transform: rotate(18deg);
}
.sun-light:nth-child(10n + 3) {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-o-transform: rotate(36deg);
-ie-transform: rotate(36deg);
transform: rotate(36deg);
}
.sun-light:nth-child(10n + 4) {
-webkit-transform: rotate(54deg);
-moz-transform: rotate(54deg);
-o-transform: rotate(54deg);
-ie-transform: rotate(54deg);
transform: rotate(54deg);
}
.sun-light:nth-child(10n + 5) {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-o-transform: rotate(72deg);
-ie-transform: rotate(72deg);
transform: rotate(72deg);
}
.sun-light:nth-child(10n + 6) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ie-transform: rotate(90deg);
transform: rotate(90deg);
}
.sun-light:nth-child(10n + 7) {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-o-transform: rotate(108deg);
-ie-transform: rotate(108deg);
transform: rotate(108deg);
}
.sun-light:nth-child(10n + 8) {
-webkit-transform: rotate(126deg);
-moz-transform: rotate(126deg);
-o-transform: rotate(126deg);
-ie-transform: rotate(126deg);
transform: rotate(126deg);
}
.sun-light:nth-child(10n + 9) {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-o-transform: rotate(144deg);
-ie-transform: rotate(144deg);
transform: rotate(144deg);
}
.sun-light:nth-child(10n + 10) {
-webkit-transform: rotate(162deg);
-moz-transform: rotate(162deg);
-o-transform: rotate(162deg);
-ie-transform: rotate(162deg);
transform: rotate(162deg);
}
这是我的组件（React.js）：
<div className="count-down">
{timeToStart > 1 ? (
<div className="count-down__count">{Math.floor(timeToStart)}</div>
) : (
<div className="count-down__go">Go!</div>
)}
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
<div class="sun-light">
<b></b>
<s></s>
</div>
</div>
但由于某种原因，我得到了这个结果：
【问题讨论】：
-
在codepen 中，太阳光线是通过使用
childs并相应地设置它们的值来创建的。 -
@ElysianStorm 我应该在我原来的问题中添加我的尝试。我试过接受这些，但我仍然没有得到相同的结果。我已将父级设置为
position:relative -
光线有
position: absolute，太阳球也有。整个太阳应该放在一个container div可以设置为position: relative -
@ElysianStorm 除非我遗漏了什么，否则我认为这就是我们正在做的事情。父级是
count-down，它设置为相对
标签： css css-shapes