论坛 › 欢乐水吧 › 海滩

马黑黑 发表于 2024-8-3 07:54

海滩

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 574px;
        background: url('https://638183.freep.cn/638183/t24/webp/seas.webp') no-repeat center/cover;
        display: grid;
        place-items: center;
        pointer-events: none;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        z-index: 1;
        position: relative;
        --conic: 2%;
}
#mydiv::after {
        position: absolute;
        content: '';
        top: 20px;
        width: 120px;
        height: 120px;
        background: repeating-conic-gradient(transparent, green, transparent var(--conic));
        -webkit-mask: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
        transform: rotate(var(--deg));
}
#mydiv:hover::after { --conic: 4%; }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask: linear-gradient(to bottom left, transparent, transparent, red);
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2014710195" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted></video>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-8-3 07:55

本帖最后由 马黑黑 于 2024-8-3 19:46 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 574px;
        background: url('https://638183.freep.cn/638183/t24/webp/seas.webp') no-repeat center/cover;
        display: grid;
        place-items: center;
        pointer-events: none;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        z-index: 1;
        position: relative;
        --conic: 2%;
}
#mydiv::after {
        position: absolute;
        content: '';
        top: 20px;
        width: 120px;
        height: 120px;
        background: repeating-conic-gradient(transparent, green, transparent var(--conic));
        -webkit-mask: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#mydiv:hover::after { --conic: 4%; }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask: linear-gradient(to bottom left, transparent, transparent, red);
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2014710195" autoplay loop&gt;&lt;/audio&gt;
        &lt;video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
mydiv.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

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

梦油 发表于 2024-8-3 09:31

我真渴望到海边住上几天。

南无月 发表于 2024-8-3 09:34

{:4_173:}

这个小播的设计可以封神了。
锥形渐变是背景，小花只是遮罩出花朵形状。。
--conic: 4%;锥形渐变鼠标触碰之后发生变化。
于是小播上的花纹也跟着改变。。

南无月 发表于 2024-8-3 09:35

海水视频，与背景浑然一体，很高级的动态效果。
背景图片选得好，线性渐变设计的好，这个融合效果太自然了。。。
老师的设计巧夺天工。。{:4_204:}

梦江南 发表于 2024-8-3 09:37

老师真厉害，把静态海滩用代码变成漂亮的水动！太赞了！{:4_187:}

老谟深虑 发表于 2024-8-3 12:21

         谢谢老师的好代码，辛苦了！

红影 发表于 2024-8-3 13:37

小播和视频都用到了遮罩效果呢。
小播那个尤其有趣，还能用鼠标触碰来调整线条密度，很奇妙的设想{:4_199:}

红影 发表于 2024-8-3 13:38

发现很多代码功能就在那，怎么样使用才能更出彩，这是个大命题，黑黑的运用实在是太赞了{:4_199:}

红影 发表于 2024-8-3 13:40

用遮罩留出想要的形状，这个以前用过，但是遮罩下的锥形渐变仍然能被触动，这个完全没想到了{:4_173:}
一个非常奇妙的思路{:4_199:}

小文 发表于 2024-8-3 14:13

好美！欣赏先生佳作！并问好！

马黑黑 发表于 2024-8-3 19:46

小文 发表于 2024-8-3 14:13
好美！欣赏先生佳作！并问好！

晚上好

马黑黑 发表于 2024-8-3 19:47

梦油 发表于 2024-8-3 09:31
我真渴望到海边住上几天。

诱人的地方

马黑黑 发表于 2024-8-3 19:47

红影 发表于 2024-8-3 13:38
发现很多代码功能就在那，怎么样使用才能更出彩，这是个大命题，黑黑的运用实在是太赞了

这个都可以尝试的

马黑黑 发表于 2024-8-3 19:47

南无月 发表于 2024-8-3 09:34
这个小播的设计可以封神了。
锥形渐变是背景，小花只是遮罩出花朵形状。。
--conic: 4%;锥 ...

现在是完全能理解代码了，厉害

红影 发表于 2024-8-3 19:57

马黑黑 发表于 2024-8-3 19:47
这个都可以尝试的

如何尝试，从哪个方向入手，这也很需要功夫的。

南无月 发表于 2024-8-3 20:58

马黑黑 发表于 2024-8-3 19:47
现在是完全能理解代码了，厉害

开盲盒的方法让人进步哈。。
白老师代码厉害，教学方法也厉害。{:4_174:}

南无月 发表于 2024-8-3 20:59

马黑黑 发表于 2024-8-3 19:47
现在是完全能理解代码了，厉害

这个视频融合的跟了一个贴子。。
小播锥形渐变4%的样子非常好看，就放在固定显示部分了。。
让它回原位不要百分比又回不去，只能换个颜色{:4_173:}

醉美水芙蓉 发表于 2024-8-3 21:37

马黑黑 发表于 2024-8-3 22:38

醉美水芙蓉 发表于 2024-8-3 21:37
看似简单的播放器，其实黑黑老师花了好多技巧的！

{:4_190:}

查看完整版本: 海滩