五叶草

山人发表于 2022-11-30 09:38

本帖最后由山人于 2022-11-30 10:17 编辑 <br /><br />马老师用单元素制作过三叶草，很给力。单元素画五叶草就力不从心了，这需要多元素。设想是这样：一个包裹叶片的母元素+五个子元素，母元素将子元素包裹起来，其高宽是子元素高宽的两倍（子元素高宽一致）。<p></p><div><br></div><div>母元素CSS代码，很简单，不解释：</div><div><br></div><div><div>#mama {</div><div><span style="white-space: pre;"> </span>margin: 50px auto 0;</div><div><span style="white-space: pre;"> </span>position: relative;</div><div><span style="white-space: pre;"> </span>width: 200px;</div><div><span style="white-space: pre;"> </span>height: 200px;</div><div>}</div></div><div><br></div><div>子元素首先需要一个通用属性设置，CSS代码如下：</div><div><br></div><div>.petal {</div><div><div><span style="white-space: pre;"> </span>position: absolute;</div><div><span style="white-space: pre;"> </span>width: 100px;</div><div><span style="white-space: pre;"> </span>height: 100px;</div><div><span style="white-space: pre;"> </span>background: darkgreen;</div><div><span style="white-space: pre;"> </span>transform-origin: 100% 100%;</div><div><span style="white-space: pre;"> </span>border-radius: 0% 100%;</div><div><span style="white-space: pre;"> </span>box-shadow: 2px 2px 20px #000;</div><div>}</div></div><div><br></div><div>需要理解的是转换基点transform-origin，根据border-radius的设定，应设置在右下角。</div><div><br></div><div>然后每一个叶片，旋转不同的角度，五个叶片，平均每一个叶片占 360/5=72（度），需要给它们一一设置：</div><div><br></div><div><div>.p1 { transform: rotate(0deg); }</div><div>.p2 { transform: rotate(70deg); }</div><div>.p3 { transform: rotate(140deg); }</div><div>.p4 { transform: rotate(210deg); }</div><div>.p5 { transform: rotate(280deg); }</div></div><div><br></div><div>最后是HTML代码：</div><div><br></div><div><div><div id="mama"></div><div><span style="white-space:pre"> </span><span class="petal p1"></span></div><div><span style="white-space:pre"> </span><span class="petal p2"></span></div><div><span style="white-space:pre"> </span><span class="petal p3"></span></div><div><span style="white-space:pre"> </span><span class="petal p4"></span></div><div><span style="white-space:pre"> </span><span class="petal p5"></span></div><div></div></div></div><div><br></div><div>看看效果：</div><div><br></div><div><br></div>

<style>
#mama {
margin: 50px auto 0;
position: relative;
width: 200px;
height: 200px;
}
.petal {
position: absolute;
width: 100px;
height: 100px;
background: darkgreen;
transform-origin: 100% 100%;
border-radius: 0% 100%;
box-shadow: 2px 2px 20px #000;
}
.p1 { transform: rotate(0deg); }
.p2 { transform: rotate(70deg); }
.p3 { transform: rotate(140deg); }
.p4 { transform: rotate(210deg); }
.p5 { transform: rotate(280deg); }

</style>

<div id="mama">
<span class="petal p1"></span>
<span class="petal p2"></span>
<span class="petal p3"></span>
<span class="petal p4"></span>
<span class="petal p5"></span>
</div>

山人发表于 2022-11-30 10:16

改变子元素通用属性设置的 border-radius 值，会得到不同的叶片形状。下面的border-radius值为 0 50%
<div><br></div>
<style>
.mama {
margin: 50px auto 0;
position: relative;
width: 200px;
height: 200px;
}

.border1 { border-radius: 0 50%; }

</style>

<div class="mama">
<span class="petal p1 border1"></span>
<span class="petal p2 border1"></span>
<span class="petal p3 border1"></span>
<span class="petal p4 border1"></span>
<span class="petal p5 border1"></span>
</div>

红影发表于 2022-11-30 10:18

漂亮。这个直接用了整数70度，到最后也看不出来呢{:4_187:}

山人发表于 2022-11-30 10:21

红影发表于 2022-11-30 10:18
漂亮。这个直接用了整数70度，到最后也看不出来呢

两度的差距肉眼基本看不出

山人发表于 2022-11-30 10:46

换个线性渐变，叶片更像一些：
<div><br></div>
<style>
.mama {
margin: 50px auto 0;
position: relative;
width: 200px;
height: 200px;
}

.border2 { border-radius: 0 70%; background: linear-gradient(45deg, darkgreen, forestgreen 50%, darkgreen); }

</style>

<div class="mama">
<span class="petal p1 border2"></span>
<span class="petal p2 border2"></span>
<span class="petal p3 border2"></span>
<span class="petal p4 border2"></span>
<span class="petal p5 border2"></span>
</div>

山人发表于 2022-11-30 10:48

黄金叶也能生产：

<div><br></div>
<style>
.mama {
margin: 50px auto 0;
position: relative;
width: 200px;
height: 200px;
}

.border3 { border-radius: 0 70%; background: linear-gradient(43deg, darkgreen, yellow 50%, darkgreen); }

</style>

<div class="mama">
<span class="petal p1 border3"></span>
<span class="petal p2 border3"></span>
<span class="petal p3 border3"></span>
<span class="petal p4 border3"></span>
<span class="petal p5 border3"></span>
</div>

山人发表于 2022-11-30 10:50

黄金叶的线性渐变角度减少或增加一点点，两度吧，这样叶片看上去是凹感，不然可能是凸感。前面的色差不大的渐变45度就好。

山人发表于 2022-11-30 10:52

本帖最后由山人于 2024-10-24 11:12 编辑 <br /><br /><style>
#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/truck.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.myball { offset-path: path('M 765 75 Q 950 400,590 526 T 0 0'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); }
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
@keyframes move { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33682225" autoplay loop></audio>
<svg id="msvg" width="100%" height="100%"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);

sc.onload = () => {
var dr = _dr(msvg);
dr.defs('defs'); //创建defs标签
//小球
dr.g('g1').addTo('defs');
dr.circle(0,0,6,'#fff').addTo('g1');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
}
//渐变
var stop = `
   <stop offset="0%" stop-color="darkred"/>
   <stop offset="50%" stop-color="green"/>
   <stop offset="100" stop-color="red"/>
`;
var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};
dr.gradient('linearGradient', attr, stop);
//小播 : path 添加到 player
dr.g('player').addTo('defs');
for(var i = 0, tt = 10; i < tt; i++) {
dr.path('M80 80 Q-120 90, 50 10', 'transparent', 'url(#lgd)', 8, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
}
dr.use('#player', 450, 300); //实例化小播
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
};
</script>

红影发表于 2022-11-30 11:13

山人发表于 2022-11-30 10:21
两度的差距肉眼基本看不出

到最后的那片都累积到10度了啊，不过也还好，基本看不出的。

红影发表于 2022-11-30 11:18

加了渐变更漂亮{:4_187:}

樵歌发表于 2022-11-30 20:30

在山中修炼，大有超越马黑仙术趋势，也。

小辣椒 发表于 2022-11-30 22:06

樵歌发表于 2022-11-30 20:30
在山中修炼，大有超越马黑仙术趋势，也。

樵哥哥也是看出兴趣来了，一起学习，马黑仙术现在还要加山人仙术了{:4_178:}{:4_172:}

醉美水芙蓉 发表于 2022-11-30 22:34

樵歌发表于 2022-12-1 08:47

小辣椒发表于 2022-11-30 22:06
樵哥哥也是看出兴趣来了，一起学习，马黑仙术现在还要加山人仙术了

他们是师兄弟俩。樵哥哥只看的份儿了{:4_198:}

梦缘发表于 2022-12-2 19:47

山人发表于 2022-11-30 10:16
改变子元素通用属性设置的 border-radius 值，会得到不同的叶片形状。下面的border-radius值为 0 50%

谢谢老师的代码分享，您辛苦了。{:4_187:}

页: [1]

花潮论坛's Archiver

五叶草