论坛 › 欢乐水吧 › 疏影

马黑黑 发表于 2024-2-16 08:27

疏影

<style>
#papa { margin: 0 0 0 calc(50% - 593px); position: relative; padding: 0; box-sizing: content-box; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/20u.jpg') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 10px groove lightblue; overflow: hidden; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/goldfish.gif'); left: 20%; top: 70%; mix-blend-mode: multiply; }
#papa::after { transform: translate(-100px,0) scale(-1,1); }
#player, #pclone { margin: 20px auto; position: relative; width: 150px; height: 150px; animation: rot 6s linear infinite var(--state); cursor: pointer; }
#pclone { filter: blur(1px) opacity(.5); }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 75px; border-radius: 100%; background: radial-gradient(green, deeppink, green); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267406" autoplay loop></audio>
        <div id="player"></div>
        <div id="pclone"></div>
</div>

<script>
var all = 5;
Array.from({length: all}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `--ww: 20px; --deg: ${360 / all * key}deg;`;
        player.appendChild(item);
});
pclone.innerHTML = player.innerHTML;
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = pclone.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-2-16 08:28

代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); position: relative; padding: 0; box-sizing: content-box; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/20u.jpg') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 10px groove lightblue; overflow: hidden; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/goldfish.gif'); left: 20%; top: 70%; mix-blend-mode: multiply; }
#papa::after { transform: translate(-100px,0) scale(-1,1); }
#player, #pclone { margin: 20px auto; position: relative; width: 150px; height: 150px; animation: rot 6s linear infinite var(--state); cursor: pointer; }
#pclone { filter: blur(1px) opacity(.5); }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 75px; border-radius: 100%; background: radial-gradient(green, deeppink, green); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267406" autoplay loop></audio>
        <div id="player"></div>
        <div id="pclone"></div>
</div>

<script>
var all = 5;
Array.from({length: all}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `--ww: 20px; --deg: ${360 / all * key}deg;`;
        player.appendChild(item);
});
pclone.innerHTML = player.innerHTML;
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = pclone.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-2-16 08:35

播放器控制按钮大致上按这个思路实现：
这个叶瓣效果也很美 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

不同的是，背景渐变使用径向渐变替代线性渐变。

模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。

金鱼使用一对 #papa 选择器的伪元素做成，content 属性直接用 url 函数加载图片，::after 左右倒置一下并往左偏移。

樵歌 发表于 2024-2-16 09:43

这位小仙女在想，送介么美的花花，要不要俺小女子以身相许呢{:4_170:}

樵歌 发表于 2024-2-16 09:45

一角那四尾金鱼在不断喝水，好有趣{:4_189:}

红影 发表于 2024-2-16 10:12

马黑黑 发表于 2024-2-16 08:35
播放器控制按钮大致上按这个思路实现：
这个叶瓣效果也很美 - 马黑黑教程专版 - 花潮论坛 - Powered by Di ...

“模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。”
这句指的pclone.innerHTML = player.innerHTML;吧，因为player.appendChild(item);也需要赋予pclone

这个#pclone { filter: blur(1px) opacity(.5); } 没看懂，只有虚化和透明度的设置，没拉开距离啊，怎么分出的上下？

红影 发表于 2024-2-16 10:13

这里的环境好美，又是适合修炼的地方呢{:4_173:}

朵拉 发表于 2024-2-16 10:34

漂亮，学习下~~{:4_204:}

马黑黑 发表于 2024-2-16 11:16

朵拉 发表于 2024-2-16 10:34
漂亮，学习下~~

{:4_190:}

马黑黑 发表于 2024-2-16 11:16

樵歌 发表于 2024-2-16 09:43
这位小仙女在想，送介么美的花花，要不要俺小女子以身相许呢

你想多了{:4_170:}

马黑黑 发表于 2024-2-16 11:17

樵歌 发表于 2024-2-16 09:45
一角那四尾金鱼在不断喝水，好有趣

说不定人家是在开会

马黑黑 发表于 2024-2-16 11:17

红影 发表于 2024-2-16 10:13
这里的环境好美，又是适合修炼的地方呢

修炼到家了就不会这么想了

马黑黑 发表于 2024-2-16 11:22

红影 发表于 2024-2-16 10:12
“模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。”
这句指的pclone.innerHTML = ...

这两个div使用相对定位，position: relative; ，这样的定位，元素按文档流占用实际空间，div 元素属于 block（块状）结构，不会水平并排，而是垂直排列（当然，特定布局可以改变这些特性）；两个元素都用 margin: 20px auto; ，外边距属性设为20，居中。故而得到帖子中它们呈现出来的位置关系。

小辣椒 发表于 2024-2-16 12:34

黑黑~~这个花瓣效果有加了滤镜吗？小辣椒发现滤镜效果调节颜色有点难度，自己想要的有时候调不出来

小辣椒 发表于 2024-2-16 12:34

欣赏黑黑的新科技产品，赞的~{:4_178:}

马黑黑 发表于 2024-2-16 13:04

小辣椒 发表于 2024-2-16 12:34
欣赏黑黑的新科技产品，赞的~

{:4_190:}

马黑黑 发表于 2024-2-16 13:07

小辣椒 发表于 2024-2-16 12:34
黑黑~~这个花瓣效果有加了滤镜吗？小辣椒发现滤镜效果调节颜色有点难度，自己想要的有时候调不出来

这个叶瓣效果，没有使用滤镜，是用了背景渐变做出来的。金鱼用了混合技术，和滤镜差不多，但是不是滤镜属性，而是 mix-blend-mode 属性，融合或混合。

小辣椒 发表于 2024-2-16 13:13

马黑黑 发表于 2024-2-16 13:07
这个叶瓣效果，没有使用滤镜，是用了背景渐变做出来的。金鱼用了混合技术，和滤镜差不多，但是不是滤镜属 ...

这些知识点小辣椒都没有学习过的，所以做作业会花时间，要弄懂就要一个个问度娘。。。。除非直接套用

樵歌 发表于 2024-2-16 14:07

马黑黑 发表于 2024-2-16 11:16
你想多了

俺 是说她在想画她的呢{:4_189:}

樵歌 发表于 2024-2-16 14:08

马黑黑 发表于 2024-2-16 11:17
说不定人家是在开会

不，是在吵架或骂大街嘞{:4_189:}

查看完整版本: 疏影