论坛 › 音乐沙龙 › The Promise

马黑黑 发表于 2024-10-5 19:50

The Promise

<style>
        #papa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/promise.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
        #player { position: absolute; bottom: 10px; left: calc(50% - 100px); width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=410055747" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" autoplay loop muted></video>
        <img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/9star.svg"/>
</div>

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

马黑黑 发表于 2024-10-5 19:51

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
        #papa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/promise.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
        #player { position: absolute; bottom: 10px; left: calc(50% - 100px); width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        @keyframes rot { to { transform: rotate(360deg); } }
&lt;/style&gt;

&lt;div id="papa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=410055747" autoplay loop&gt;&lt;/audio&gt;
        &lt;video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/9star.svg"/&gt;
&lt;/div&gt;

&lt;script&gt;
        mState = () =&gt; {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                aud.paused ? vid.pause() : vid.play();
        };
        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-10-5 20:40

马黑黑 发表于 2024-10-5 21:32

醉美水芙蓉 发表于 2024-10-5 20:40
黑黑老师选的背景视频挺漂亮的！

谢谢

花飞飞 发表于 2024-10-5 21:38

我想说，色彩靓丽，音乐震撼。。。感觉以后跟贴都不用改音乐。。{:4_173:}

花飞飞 发表于 2024-10-5 21:39

这个小播用了火星配色。来自外星的神秘图案。。{:4_170:}

花飞飞 发表于 2024-10-5 21:39

点一百零八个赞。。。好看。。

马黑黑 发表于 2024-10-5 21:46

花飞飞 发表于 2024-10-5 21:39
这个小播用了火星配色。来自外星的神秘图案。。

夸张了吧

马黑黑 发表于 2024-10-5 21:46

花飞飞 发表于 2024-10-5 21:39
点一百零八个赞。。。好看。。

谢谢谢谢

梦江南 发表于 2024-10-6 07:42

又是一个漂亮的播放器，点赞学习！{:4_187:}

马黑黑 发表于 2024-10-6 08:03

梦江南 发表于 2024-10-6 07:42
又是一个漂亮的播放器，点赞学习！

播放器可以在线生成，即将发布，敬请关注

红影 发表于 2024-10-6 09:08

这小播又是漂亮的svg图案，还加了顶点的小圆，像顶皇冠，真漂亮{:4_199:}

红影 发表于 2024-10-6 09:12

这视频配合这样的背景，很有寓意，山高水长，不变的是彼此的约定。
欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2024-10-6 12:19

红影 发表于 2024-10-6 09:08
这小播又是漂亮的svg图案，还加了顶点的小圆，像顶皇冠，真漂亮

越看越好看是吧{:4_170:}

马黑黑 发表于 2024-10-6 12:19

红影 发表于 2024-10-6 09:12
这视频配合这样的背景，很有寓意，山高水长，不变的是彼此的约定。
欣赏黑黑好帖

感谢支持

红影 发表于 2024-10-6 17:14

马黑黑 发表于 2024-10-6 12:19
越看越好看是吧

是啊，而且这个小播还有在线工具，太漂亮了{:4_187:}

红影 发表于 2024-10-6 17:15

马黑黑 发表于 2024-10-6 12:19
感谢支持

黑黑的制作寓意真棒{:4_199:}

马黑黑 发表于 2024-10-6 17:30

红影 发表于 2024-10-6 17:15
黑黑的制作寓意真棒

果酱果酱

马黑黑 发表于 2024-10-6 17:31

红影 发表于 2024-10-6 17:14
是啊，而且这个小播还有在线工具，太漂亮了

可以配置不同的颜色

花飞飞 发表于 2024-10-6 18:25

马黑黑 发表于 2024-10-5 21:46
谢谢谢谢

谢多多{:4_173:}

查看完整版本: The Promise