嗯,最近很火的小雏菊
实现思路:
- 花蕊
先用border-radius圆边属性画一个圆,再在用弹性布局均匀散落一些杂色,杂色用很多个很小的div填充 - 花瓣
还是用圆边属性画出叶子的形状,再利用transform:rotate旋转变换使它均匀的分布在花蕊周围
css能力有限,实现的比较粗糙
效果如图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 背景色 */
html body{
background-color: yellowgreen;
}
/* 调整显示位置 */
#daisy{
position:absolute;
top:200px;
left:200px;
}
/* 花蕊 */
#daisy #stamen {
position: absolute;
width: 150px;
height: 150px;
border-radius: 200px;
background-color: #f7a738;
overflow: hidden;
z-index: 2;
display: flex;
flex-wrap: wrap;
}
/* 花蕊中的杂色 */
#daisy #stamen .mell{
width: 3px;
height: 3px;
background-color: #dd8c23;
margin:6px;
}
/* 花瓣的外壳:控制花瓣到旋转中心的位置 */
#daisy .petal_out {
position: absolute;
top: 60px;
left: -105px;
width: 180px;
height: 30px;
transform-origin: center right;
}
/* 花瓣 */
#daisy .petal_out .petal{
width: 120px;
height: 30px;
background-color: #f2f2f2;
border-radius: 35% 50% 50% 35%;
}
/* 不同花瓣旋转度数不同 */
#daisy .p_out0 {
transform: rotate(0deg)
}
#daisy .p_out1 {
transform: rotate(18deg)
}
#daisy .p_out2 {
transform: rotate(36deg)
}
#daisy .p_out3 {
transform: rotate(54deg)
}
#daisy .p_out4 {
transform: rotate(72deg)
}
#daisy .p_out5 {
transform: rotate(90deg)
}
#daisy .p_out6 {
transform: rotate(108deg)
}
#daisy .p_out7 {
transform: rotate(126deg)
}
#daisy .p_out8 {
transform: rotate(144deg)
}
#daisy .p_out9 {
transform: rotate(162deg)
}
#daisy .p_out10 {
transform: rotate(180deg)
}
#daisy .p_out11 {
transform: rotate(198deg)
}
#daisy .p_out12 {
transform: rotate(216deg)
}
#daisy .p_out13 {
transform: rotate(234deg)
}
#daisy .p_out14 {
transform: rotate(252deg)
}
#daisy .p_out15 {
transform: rotate(270deg)
}
#daisy .p_out16 {
transform: rotate(288deg)
}
/* 消失的一瓣 */
#daisy .p_out17 {
transform: rotate(306deg);
display: none;
}
#daisy .p_out18 {
transform: rotate(324deg)
}
#daisy .p_out19 {
transform: rotate(342deg)
}
</style>
</head>
<body>
<div id="daisy">
<div id="stamen">
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
<div class="mell"></div>
</div>
<div class="petal_out p_out0"><div class="petal"></div></div>
<div class="petal_out p_out1"><div class="petal"></div></div>
<div class="petal_out p_out2"><div class="petal"></div></div>
<div class="petal_out p_out3"><div class="petal"></div></div>
<div class="petal_out p_out4"><div class="petal"></div></div>
<div class="petal_out p_out5"><div class="petal"></div></div>
<div class="petal_out p_out6"><div class="petal"></div></div>
<div class="petal_out p_out7"><div class="petal"></div></div>
<div class="petal_out p_out8"><div class="petal"></div></div>
<div class="petal_out p_out9"><div class="petal"></div></div>
<div class="petal_out p_out10"><div class="petal"></div></div>
<div class="petal_out p_out11"><div class="petal"></div></div>
<div class="petal_out p_out12"><div class="petal"></div></div>
<div class="petal_out p_out13"><div class="petal"></div></div>
<div class="petal_out p_out14"><div class="petal"></div></div>
<div class="petal_out p_out15"><div class="petal"></div></div>
<div class="petal_out p_out16"><div class="petal"></div></div>
<div class="petal_out p_out17"><div class="petal"></div></div>
<div class="petal_out p_out18"><div class="petal"></div></div>
<div class="petal_out p_out19"><div class="petal"></div></div>
</div>
</body>
</html>