马黑黑 发表于 2024-7-14 12:24

挡不住的思念

<style>
#tiezi {
        --width: 1200px;
        margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: var(--width);
        height: 700px;
        background: navy radial-gradient(dodgerblue, transparent);
        box-shadow: 3px 3px 6px #111;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#player, .vid { position: absolute; }
#player {
        left: 45%;
        top: 30px;
        cursor: pointer;
        filter: drop-shadow(0 0 10px lightblue) invert(10%);
        transition: 1s;
        animation: rot 8s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 20px lightblue) invert(0); }
.vid {       
        bottom: 0;
        width: 100%;
        height: calc(100% + 60px);
        object-fit: cover;
        mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tiezi">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2101250004" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2418175/01/76/33/6404c766070fc.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03031b6f8.mp4" autoplay loop muted></video>
        <img id="player" src="https://638183.freep.cn/638183/small/780.png" alt="" />
</div>

<script>
(function() {
        let mState = () => {
                let vids = document.querySelectorAll('.vid');
                tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
                player.title = ['暂停','播放'][+aud.paused];
                vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
        };
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();})();
</script>

马黑黑 发表于 2024-7-14 12:25

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#tiezi {
        --width: 1200px;
        margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: var(--width);
        height: 700px;
        background: navy radial-gradient(dodgerblue, transparent);
        box-shadow: 3px 3px 6px #111;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#player, .vid { position: absolute; }
#player {
        left: 45%;
        top: 30px;
        cursor: pointer;
        filter: drop-shadow(0 0 10px lightblue) invert(10%);
        transition: 1s;
        animation: rot 8s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 20px lightblue) invert(0); }
.vid {       
        bottom: 0;
        width: 100%;
        height: calc(100% + 60px);
        object-fit: cover;
        mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
&lt;/style&gt;

&lt;div id="tiezi"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2101250004" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="vid" src="https://img.tukuppt.com/video_show/2418175/01/76/33/6404c766070fc.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/99/5b4f03031b6f8.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;img id="player" src="https://638183.freep.cn/638183/small/780.png" alt="" /&gt;
&lt;/div&gt;

&lt;script&gt;
(function() {
        let mState = () =&gt; {
                let vids = document.querySelectorAll('.vid');
                tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
                player.title = ['暂停','播放'][+aud.paused];
                vids.forEach(vid =&gt; 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-7-14 12:29

二楼代码如果是黑白版，说明浏览器不支持非入侵式代码高亮。

想看到彩版代码，需要 Chromium 内核 ≥ 105

【附】helight 高亮代码生成器地址：http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=1720913280

南无月 发表于 2024-7-14 13:29

我来瞧瞧代码的～彩色效果是不想了～过阵子再说～

马黑黑 发表于 2024-7-14 13:30

南无月 发表于 2024-7-14 13:29
我来瞧瞧代码的～彩色效果是不想了～过阵子再说～

黑白的清晰

南无月 发表于 2024-7-14 13:36

蓝背景整个蓝透放射渐变，加个双视频～
还是标题党～{:4_170:}

南无月 发表于 2024-7-14 13:37

马黑黑 发表于 2024-7-14 13:30
黑白的清晰

很清楚～黑白分明，跟大熊猫一样帅

红影 发表于 2024-7-14 13:41

马黑黑 发表于 2024-7-14 12:29
二楼代码如果是黑白版，说明浏览器不支持非入侵式代码高亮。

想看到彩版代码，需要 Chromium 内核 ≥ 10 ...

我能看到彩色的，又一个隐藏内部封装的彩色代码{:4_199:}

红影 发表于 2024-7-14 13:42

看到小点点，以为又一个纯代码制作的，原来是视频{:4_173:}

红影 发表于 2024-7-14 13:44

这小播漂亮，那么纯洁的一朵小花。背景也很美。小点点也有趣，没想到还有这样的的视频{:4_187:}

梦江南 发表于 2024-7-14 17:56

回老师，二楼看到的是黑白。咋办？

马黑黑 发表于 2024-7-14 18:32

梦江南 发表于 2024-7-14 17:56
回老师，二楼看到的是黑白。咋办？

你用的是什么浏览器？

马黑黑 发表于 2024-7-14 19:21

红影 发表于 2024-7-14 13:41
我能看到彩色的，又一个隐藏内部封装的彩色代码

这个就是那个帖子说的东东，按规范组织好代码、HTML标签，引用 helight.js，就可以了

马黑黑 发表于 2024-7-14 19:21

南无月 发表于 2024-7-14 13:37
很清楚～黑白分明，跟大熊猫一样帅

太帅啦

绿叶清舟 发表于 2024-7-14 19:24

俺看到的是彩色的

马黑黑 发表于 2024-7-14 19:36

绿叶清舟 发表于 2024-7-14 19:24
俺看到的是彩色的

浏览器支持

马黑黑 发表于 2024-7-14 19:37

南无月 发表于 2024-7-14 13:36
蓝背景整个蓝透放射渐变，加个双视频～
还是标题党～

啥标题党？歌名。

马黑黑 发表于 2024-7-14 19:38

红影 发表于 2024-7-14 13:44
这小播漂亮，那么纯洁的一朵小花。背景也很美。小点点也有趣，没想到还有这样的的视频

视频应有尽有，@走过岁月 可以制作更多精彩的视频

冬天的雨 发表于 2024-7-14 19:51

原来挡不住的思念的纯音乐也是好听的{:4_208:}

居然循环了二遍{:4_170:}

红影 发表于 2024-7-14 20:19

马黑黑 发表于 2024-7-14 19:38
视频应有尽有，@走过岁月 可以制作更多精彩的视频

俺就只管去用了，反正不会做{:4_173:}
页: [1] 2 3 4
查看完整版本: 挡不住的思念