马黑黑 发表于 2024-8-5 12:02

唐

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: tan url('https://638183.freep.cn/638183/t24/webp/tang.webp') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.95);
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        left: calc(50% - 150px);
        top: -150px;
        width: 300px;
        height: 300px;
        background: url('https://638183.freep.cn/638183/small/ygf.jpg') no-repeat center/cover;
        -webkit-mask: url('https://638183.freep.cn/638183/web/svg/flower_3s.svg') no-repeat center/100px 100px;
        transition: .72s;
        cursor: pointer;       
}
#player:hover { -webkit-mask-size: 300px 300px; }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387259082" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
</div>

<script>
mState = () => {
        player.style.webkitMaskImage = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/flower_3.svg' : 'https://638183.freep.cn/638183/web/svg/flower_3s.svg'})`;
        player.title = '点击' + ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-8-5 12:02

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mydiv {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: tan url('https://638183.freep.cn/638183/t24/webp/tang.webp') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.95);
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        left: calc(50% - 150px);
        top: -150px;
        width: 300px;
        height: 300px;
        background: url('https://638183.freep.cn/638183/small/ygf.jpg') no-repeat center/cover;
        -webkit-mask: url('https://638183.freep.cn/638183/web/svg/flower_3s.svg') no-repeat center/100px 100px;
        transition: .72s;
        cursor: pointer;       
}
#player:hover { -webkit-mask-size: 300px 300px; }
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387259082" autoplay loop&gt;&lt;/audio&gt;
        &lt;div id="player" title="播放/暂停"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
mState = () =&gt; {
        player.style.webkitMaskImage = `url(${aud.paused ? 'https://638183.freep.cn/638183/web/svg/flower_3.svg' : 'https://638183.freep.cn/638183/web/svg/flower_3s.svg'})`;
        player.title = '点击' + ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; mState();
player.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-5 12:05

本帖：

播放控制器使用遮罩+遮罩体响应式更换，和之前的1001（音乐已失效）差不多。

起个网名好难 发表于 2024-8-5 12:45

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

南无月 发表于 2024-8-5 13:06

贴子好漂亮，一图一播一乐，简洁又尽显大唐盛世之美{:4_199:}

南无月 发表于 2024-8-5 13:08

马黑黑 发表于 2024-8-5 12:05
本帖：

播放控制器使用遮罩+遮罩体响应式更换，和之前的1001（音乐已失效）差不多。

唐朝美人底图300，遮罩100变300，动静图切换~~{:4_199:}

我好奇的是，SVG动图的制作。。。

朵拉 发表于 2024-8-5 14:25

欣赏学习老师的佳作，
播放器是唐美人玉环么{:4_190:}

梦江南 发表于 2024-8-5 15:19

好繁华！赞哦！{:4_187:}

老谟深虑 发表于 2024-8-5 15:57

         好制作，好美！

梦油 发表于 2024-8-5 16:09

盛唐美景、目不暇接。

醉美水芙蓉 发表于 2024-8-5 16:52

醉美水芙蓉 发表于 2024-8-5 16:52

马黑黑 发表于 2024-8-5 17:10

梦油 发表于 2024-8-5 16:09
盛唐美景、目不暇接。

富丽堂皇

马黑黑 发表于 2024-8-5 17:11

南无月 发表于 2024-8-5 13:08
唐朝美人底图300，遮罩100变300，动静图切换~~

我好奇的是，SVG动图的制作。。。

{:4_191:}

马黑黑 发表于 2024-8-5 17:12

老谟深虑 发表于 2024-8-5 15:57
好制作，好美！

{:4_191:}

小辣椒 发表于 2024-8-5 18:33

马黑黑 发表于 2024-8-5 12:02
帖子代码

&lt;style&gt;


黑黑是我浏览器问题吗？看见代码有在界面外面

小辣椒 发表于 2024-8-5 18:34

马黑黑 发表于 2024-8-5 12:02
帖子代码

&lt;style&gt;


回帖后代码都在界面里面了

小辣椒 发表于 2024-8-5 18:35

先上来看看的，黑黑这个播放器太漂亮了{:4_199:}

红影 发表于 2024-8-5 19:38

这个有意思，小播下面藏了个宫妆美人儿{:4_199:}

红影 发表于 2024-8-5 19:39

小播的点击，可以在动态图和静态图进行切换呢，这个好{:4_199:}
页: [1] 2
查看完整版本: 唐