命运之夜

马黑黑

马黑黑

帖子代码

<style>     #papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 770px; background: url('https://638183.freep.cn/638183/t24/webp/fate0.webp'); box-shadow: 2px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }     #papa::before { position: absolute; content: ''; left: 50px; bottom: 50px; width: 300px; height: 300px; background: url('https://638183.freep.cn/638183/t24/webp/fate.webp') no-repeat center/cover; }     #play { position: absolute; left: 10px; bottom: 10px; border-radius: 50%; cursor: pointer; animation: rot 10s linear infinite var(--state); }     .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; }     @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="papa">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=448060" autoplay loop></audio>     <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/76/92/60ae3cec5fa52.mp4" muted autoplay loop></video>     <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c945639ccc.mp4" muted loop></video>     <img id="play" src="https://638183.freep.cn/638183/t24/leaf/16l.png" alt="" /> </div>   <script> let vids = document.querySelectorAll('.vid'); var mState = () => {     papa.style.setProperty('--state', ['running','paused'][+aud.paused]);     playvideo(!aud.paused); }; var playvideo = (flag) => vids.forEach(vid => flag ? vid.play() : vid.pause()); aud.onplaying = aud.onpause = () => mState(); play.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

南无月

看看今天的完美小播。。

南无月

这才发现，差点抢了沙发。。
两个动态视频的示范贴，对套用的人太友好了。

南无月

背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。。
左下角同款小图在小播转动下像是会转一样。。

马黑黑

南无月 发表于 2024-4-17 20:03
背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。 ...

高压缩了，将更性感的特征模糊了一下下

马黑黑

南无月 发表于 2024-4-17 19:57
这才发现，差点抢了沙发。。
两个动态视频的示范贴，对套用的人太友好了。

多视频背景你一直再用的呀

马黑黑

南无月 发表于 2024-4-17 19:54
看看今天的完美小播。。

原始尺寸，还不错吧？

南无月

马黑黑 发表于 2024-4-17 20:35
高压缩了，将更性感的特征模糊了一下下

做贴的图片一般都是要处理的。这个恰到好处

南无月

马黑黑 发表于 2024-4-17 20:35
多视频背景你一直再用的呀

仔细看了代码的确如此~~这个画布的是小播。。。。我把整个背景当画布了。

南无月

马黑黑 发表于 2024-4-17 20:35
原始尺寸，还不错吧？

PNG图片居然透明的。。
真实看到贴子的效果，的确又是不一样，更惊艳。

马黑黑

南无月 发表于 2024-4-17 20:45
PNG图片居然透明的。。
真实看到贴子的效果，的确又是不一样，更惊艳。

PNG就是可以透明的呀

马黑黑

南无月 发表于 2024-4-17 20:44
做贴的图片一般都是要处理的。这个恰到好处

过了一点点，压缩30%较好

马黑黑

南无月 发表于 2024-4-17 20:45
仔细看了代码的确如此~~这个画布的是小播。。。。我把整个背景当画布了。

这个帖子没有画布

南无月

马黑黑 发表于 2024-4-17 20:51
PNG就是可以透明的呀

我知道是透明的。但一般是背景透明，主体是实的。。
这个薄如蝉翼，纱堆一般的漂亮

南无月

马黑黑 发表于 2024-4-17 20:53
过了一点点，压缩30%较好

这个难道是原图的50..我做贴现在都原图75或者80

南无月

马黑黑 发表于 2024-4-17 20:54
这个帖子没有画布

最近不是一直在画布。。
二次三次也是画布。
思维定势了一丢丢。。
看了代码后才反映过来。这个一直在用的。

马黑黑

南无月 发表于 2024-4-17 21:05
最近不是一直在画布。。
二次三次也是画布。
思维定势了一丢丢。。

这个帖子的代码又和以往的东东有所不同，更简洁

马黑黑

南无月 发表于 2024-4-17 21:03
这个难道是原图的50..我做贴现在都原图75或者80

计算方式不同。压缩百分之三十，我指的是被压缩的品质

红影

南无月 发表于 2024-4-17 20:03
背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。 ...

“左下角同款小图在小播转动下像是会转一样。”

我刚想回复这个，看到月儿先说了，这样的视觉错觉真有趣