论坛 › 音乐沙龙 › 张晓红 - 云水逸

马黑黑 发表于 2024-2-15 09:27

张晓红 - 云水逸

<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-21 19:44

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

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

马黑黑 发表于 2024-2-15 09:29

<style>
.mum { }
.mum ol { padding: 10px; background: #eee; color: navy; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.mum ol li { padding-left: 20px; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
</style>

<p>帖子代码<br><br></p>
<div class="mum"><pre>
&lt;style&gt;
#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); } }
&lt;/style&gt;

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

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

var mState = () =&gt; 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 = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;

</pre></div>
<script>
var mums = document.querySelectorAll('.mum');
mums.forEach(mum => {
        var pre = document.querySelector('pre');
        var innerConts = pre.innerHTML.trim().replaceAll(/(^.*$)/gm,'<li>$1</li>');
        mum.innerHTML = '<ol>' + innerConts + '</ol>';
});
</script>

红影 发表于 2024-2-15 10:41

又是个漂亮的播放器按钮，黑黑的创意无限{:4_199:}

醉美水芙蓉 发表于 2024-2-15 10:59

红影 发表于 2024-2-15 11:04

仔细看了半天这些叶瓣的设计，真巧妙{:4_187:}

马黑黑 发表于 2024-2-15 11:39

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

{:4_190:}

马黑黑 发表于 2024-2-15 11:42

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

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

马黑黑 发表于 2024-2-15 11:43

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

哦，这是猪猪有限创意公司{:4_170:}

小辣椒 发表于 2024-2-15 12:53

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

小辣椒 发表于 2024-2-15 12:54

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

小辣椒 发表于 2024-2-15 12:55

发现这个背景视频效果加的特别的好{:4_199:}

马黑黑 发表于 2024-2-15 13:26

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

叶瓣效果

马黑黑 发表于 2024-2-15 13:26

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

这种加法，全网找不到吧{:4_170:}

马黑黑 发表于 2024-2-15 13:27

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

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

小辣椒 发表于 2024-2-15 13:29

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

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

马黑黑 发表于 2024-2-15 13:30

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

你若能深入学习了你也会

小辣椒 发表于 2024-2-15 13:30

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

就这里黑黑有，风景这变独好{:4_172:}

马黑黑 发表于 2024-2-15 13:31

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

果酱果酱

小辣椒 发表于 2024-2-15 13:31

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

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

马黑黑 发表于 2024-2-15 13:31

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

不要太辛苦

查看完整版本: 张晓红 - 云水逸