张晓红 - 云水逸

马黑黑

红影

马黑黑 发表于 2024-2-21 19:30
心理学是一门较为奇特的学科，你要研究它，你连石头都得研究一番的

石头没心，鉴定完毕。
因为你在它面前哭在它面前笑，它都无动于衷。

马黑黑

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/21u.jpeg') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 8px ridge lightgreen; overflow: hidden; }
#vid { position: absolute; top: -70px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; transform: scale(-1,1); }
#player { position: absolute; left: 160px; top: 100px; width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(3px 3px 8px darkgreen); cursor: pointer; transform: scale(var(--size)) rotate(0); animation: rotating 8s linear infinite var(--state); --size: 1.2; }
#player::before { position: absolute; content: ''; inset: 22px; border-radius: 50%; background: radial-gradient(yellow, transparent); box-shadow: 0 0 2px red, inset 0 0 160px lightblue; }
ye-zi { position: absolute; transform: rotate(60deg); offset-path: path('M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100'); offset-distance: 50%; }
ye-zi::before, ye-zi::after { position: absolute; content: ''; width: 10px; height: 50px; border-radius: 10% 70%; background: linear-gradient(lightgreen, green, lightgreen); transform-origin: 50% 100%; }
ye-zi::after { transform: rotate(45deg); }
@keyframes rotating { to { transform: scale(var(--size)) rotate(-360deg); } }
</style>

<div id="papa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=340858" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/79/5b4a079dd190a.mp4" loop muted></video>
	<div id="player"></div>
</div>

<script>
var all = 12;
Array.from({length: all}).forEach((item,key) => {
	item = document.createElement('ye-zi');
	item.style.cssText += `offset-distance: ${100 * key / all}%;`;
	player.prepend(item);
});

var mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影

又是个漂亮的播放器按钮，黑黑的创意无限

红影

仔细看了半天这些叶瓣的设计，真巧妙

马黑黑

醉美水芙蓉 发表于 2024-2-15 10:59
老师这个播放器按钮真漂亮！

马黑黑

红影 发表于 2024-2-15 11:04
仔细看了半天这些叶瓣的设计，真巧妙

这个和之前的儿童画的树叶没有太大区别，实现原理一致。叶瓣的排布则使用 offset-distance 路径，每个叶瓣在路径上占自己序列的百分比就行；偏移路径的好处是，叶瓣会自己调整方向，省去了一些旋转算法。

马黑黑

红影 发表于 2024-2-15 10:41
又是个漂亮的播放器按钮，黑黑的创意无限

哦，这是猪猪有限创意公司

小辣椒

黑黑的新产品啊，这个也是树叶效果吧，漂亮

小辣椒

小辣椒现在就会套用了，等一下去套用玩玩，不知道做不做得出

小辣椒

发现这个背景视频效果加的特别的好

马黑黑

小辣椒 发表于 2024-2-15 12:53
黑黑的新产品啊，这个也是树叶效果吧，漂亮

叶瓣效果

马黑黑

小辣椒 发表于 2024-2-15 12:55
发现这个背景视频效果加的特别的好

这种加法，全网找不到吧

马黑黑

小辣椒 发表于 2024-2-15 12:54
小辣椒现在就会套用了，等一下去套用玩玩，不知道做不做得出

应该没多大问题。套用主框架，修改细节，添加自己的元素，这就能做出有个性的作品了，总之要避免绝对的雷同或同质化。

小辣椒

马黑黑 发表于 2024-2-15 13:26
叶瓣效果

对，叶瓣效果，纯代码制作的效果，黑黑太牛了

马黑黑

小辣椒 发表于 2024-2-15 13:29
对，叶瓣效果，纯代码制作的效果，黑黑太牛了

你若能深入学习了你也会

小辣椒

马黑黑 发表于 2024-2-15 13:26
这种加法，全网找不到吧

就这里黑黑有，风景这变独好

马黑黑

小辣椒 发表于 2024-2-15 13:30
就这里黑黑有，风景这变独好

果酱果酱

小辣椒

马黑黑 发表于 2024-2-15 13:27
应该没多大问题。套用主框架，修改细节，添加自己的元素，这就能做出有个性的作品了，总之要避免绝对的雷 ...

我试一下去，争取完成一个作业

马黑黑

小辣椒 发表于 2024-2-15 13:31
我试一下去，争取完成一个作业

不要太辛苦