Batau
本帖最后由 马黑黑 于 2024-4-25 14:59 编辑 <br /><br /><style>#papa { margin: -60px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: purple url('https://638183.freep.cn/638183/t24/webp/batau.webp') no-repeat center/cover; overflow: hidden; box-shadow: 3px 3px 6px gray; display: grid; place-items: center; pointer-events: none; z-index: 1; position: relative; }
#papa:hover::before { opacity: 1; transform: scale(1.65, 1.65); }
#papa::before, #papa::after { position: absolute; content: ''; pointer-events: auto; cursor: pointer; }
#papa::before { left: 485px; bottom: 0; content: url('https://638183.freep.cn/638183/t24/webp/batau0.webp'); opacity: 0; transition: 3s; filter: drop-shadow(6px 6px 16px snow); }
#papa::after { position: absolute; content: ''; top: 140px; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 60px white; }
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) { top: -60px; width: 100%; height: calc(100% - 60px); mix-blend-mode: screen; }
.vid:nth-of-type(2) { top: 140px; width: 200px; height: 200px; border-radius: 50%; mix-blend-mode: screen; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=529150216" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/76/5b49b4ead11d1.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/78/5b49f98b80cff.mp4" loop muted></video>
</div>
<script type="text/javascript">
(function() {
let vids = document.querySelectorAll('.vid');
let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.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% - 721px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 720px; <span class="tBlue">background:</span> purple url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/batau.webp'</span>) no-repeat center/cover; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">pointer-events:</span> none; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #<span class="tBlue">papa:</span>hover::before { <span class="tBlue">opacity:</span> 1; <span class="tBlue">transform:</span> scale(1.65, 1.65); }</cl-cd>
<cl-cd data-idx="4"> #papa::before, #papa::after { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">pointer-events:</span> auto; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="5"> #papa::before { <span class="tBlue">left:</span> 485px; <span class="tBlue">bottom:</span> 0; <span class="tBlue">content:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/batau0.webp'</span>); <span class="tBlue">opacity:</span> 0; <span class="tBlue">transition:</span> 3s; <span class="tBlue">filter:</span> drop-shadow(6px 6px 16px snow); }</cl-cd>
<cl-cd data-idx="6"> #papa::after { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">top:</span> 140px; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 200px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">box-shadow:</span> inset 0 0 60px white; }</cl-cd>
<cl-cd data-idx="7"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">object-fit:</span> cover; }</cl-cd>
<cl-cd data-idx="8"> .<span class="tBlue">vid:</span>nth-of-type(1) { <span class="tBlue">top:</span> -60px; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% - 60px); <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="9"> .<span class="tBlue">vid:</span>nth-of-type(2) { <span class="tBlue">top:</span> 140px; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 200px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="13"> <<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>=529150216"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="14"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2402760/00/01/76/5b49b4ead11d1.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="15"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2402760/00/01/78/5b49f98b80cff.mp4"</span> loop muted><<span class="tDarkRed">/video</span>> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18"><<span class="tDarkRed">script</span> type=<span class="tMagenta">"text/javascript"</span>></cl-cd>
<cl-cd data-idx="19">(function() {</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">let</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">let</span> mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="22"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="23"> papa.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="24">})();</cl-cd>
<cl-cd data-idx="25"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
看的有点眼花了 异域风情，是印度歌曲么{:4_190:} 鼠标移动就会呼唤出美女，这个有趣。背景也印度风情的。漂亮{:4_199:} 用伪元素加入图片和视频，伪元素本身还带底色的，美女变大后，头部正好在框里{:4_173:} 伪元素有两个：一个是圆，一个是美人儿，都给了鼠标点击的小手响应。。transform: scale(1.65, 1.65);这个数据控制美人儿变化的宽度和高度。。数据变化可以控制美人儿变化体形。。。{:4_199:} 两个视频和背景都有不同红色元素，深浅不同，合起来的效果如梦似幻，有强烈的视觉冲击力。
伪元素代码有行四行，虽复杂却清晰。这样的构思也是独一无二了。。。
老师创意无限。。
必须多多点赞。。{:4_199:}。 南无月 发表于 2024-4-25 17:50
两个视频和背景都有不同红色元素，深浅不同，合起来的效果如梦似幻，有强烈的视觉冲击力。
伪元素代码有行 ...
太多点赞了{:4_170:}
谢谢 南无月 发表于 2024-4-25 17:48
伪元素有两个：一个是圆，一个是美人儿，都给了鼠标点击的小手响应。。transform: scale(1.65, 1.65);这个 ...
对，scale 是缩放 红影 发表于 2024-4-25 16:23
用伪元素加入图片和视频，伪元素本身还带底色的，美女变大后，头部正好在框里
有点巧妙吧 红影 发表于 2024-4-25 16:17
鼠标移动就会呼唤出美女，这个有趣。背景也印度风情的。漂亮
{:4_190:} 朵拉 发表于 2024-4-25 15:41
异域风情，是印度歌曲么
是的 愤怒的葡萄 发表于 2024-4-25 14:58
看的有点眼花了
确实 很有意思，美女挺听话的，要她出来就出来，要她回避就退出。音画着实漂亮！印度曲子好听！{:4_204:}{:4_190:} 马黑黑 发表于 2024-4-25 18:02
对，scale 是缩放
小于1就变小了。。大于1就变大了。。
可以让美人有一米八的大长腿。。 马黑黑 发表于 2024-4-25 18:01
太多点赞了
谢谢
色彩好，构思好，创意好。。。哪哪都好。。才一万个赞不够。。{:4_170:} 南无月 发表于 2024-4-25 21:05
色彩好，构思好，创意好。。。哪哪都好。。才一万个赞不够。。
多了多了 南无月 发表于 2024-4-25 21:04
小于1就变小了。。大于1就变大了。。
可以让美人有一米八的大长腿。。
要得 执著 发表于 2024-4-25 20:58
很有意思，美女挺听话的，要她出来就出来，要她回避就退出。音画着实漂亮！印度曲子好听！{:4_190 ...
{:4_190:}