命运之夜
<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>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 681px); <span class="tBlue">width:</span> 1200px; <span class="tBlue">height:</span> 770px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/fate0.webp'</span>); <span class="tBlue">box-shadow:</span> 2px 3px 6px gray; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #papa::before { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">left:</span> 50px; <span class="tBlue">bottom:</span> 50px; <span class="tBlue">width:</span> 300px; <span class="tBlue">height:</span> 300px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/fate.webp'</span>) no-repeat center/cover; }</cl-cd>
<cl-cd data-idx="4"> #play { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 10px; <span class="tBlue">bottom:</span> 10px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 10s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 70px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=448060"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/15653652/00/76/92/60ae3cec5fa52.mp4"</span> muted autoplay loop><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c945639ccc.mp4"</span> muted loop><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"play"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t24/leaf/16l.png"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"><span class="tBlue">let</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="18"><span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="19"> papa.style.setProperty(<span class="tMagenta">'--state'</span>, [<span class="tMagenta">'running'</span>,<span class="tMagenta">'paused'</span>][+aud.paused]);</cl-cd>
<cl-cd data-idx="20"> playvideo(!aud.paused);</cl-cd>
<cl-cd data-idx="21">};</cl-cd>
<cl-cd data-idx="22"><span class="tBlue">var</span> playvideo = (flag) => vids.forEach(vid => flag ? vid.play() : vid.pause());</cl-cd>
<cl-cd data-idx="23">aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="24">play.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="25"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
看看今天的完美小播。。{:4_199:} 这才发现，差点抢了沙发。。{:4_170:}
两个动态视频的示范贴，对套用的人太友好了。 背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。。
左下角同款小图在小播转动下像是会转一样。。 南无月 发表于 2024-4-17 20:03
背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。 ...
高压缩了，将更性感的特征模糊了一下下{:4_170:} 南无月 发表于 2024-4-17 19:57
这才发现，差点抢了沙发。。
两个动态视频的示范贴，对套用的人太友好了。
多视频背景你一直再用的呀 南无月 发表于 2024-4-17 19:54
看看今天的完美小播。。
原始尺寸，还不错吧？ 马黑黑 发表于 2024-4-17 20:35
高压缩了，将更性感的特征模糊了一下下
{:4_173:}做贴的图片一般都是要处理的。这个恰到好处 马黑黑 发表于 2024-4-17 20:35
多视频背景你一直再用的呀
仔细看了代码的确如此~~这个画布的是小播。。。。我把整个背景当画布了。{:4_173:} 马黑黑 发表于 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%较好
{:4_173:}这个难道是原图的50..我做贴现在都原图75或者80 马黑黑 发表于 2024-4-17 20:54
这个帖子没有画布
最近不是一直在画布。。{:4_173:}
二次三次也是画布。
思维定势了一丢丢。。
看了代码后才反映过来。这个一直在用的。 南无月 发表于 2024-4-17 21:05
最近不是一直在画布。。
二次三次也是画布。
思维定势了一丢丢。。
这个帖子的代码又和以往的东东有所不同，更简洁 南无月 发表于 2024-4-17 21:03
这个难道是原图的50..我做贴现在都原图75或者80
计算方式不同。压缩百分之三十，我指的是被压缩的品质 南无月 发表于 2024-4-17 20:03
背景图美人火辣，情景怪诞，加上由远而近的粒子，好象到了异度空间似的。。。。
武林高手，高难度坐姿。。 ...
“左下角同款小图在小播转动下像是会转一样。”
我刚想回复这个，看到月儿先说了，这样的视觉错觉真有趣{:4_173:}