Batau

马黑黑

马黑黑

帖子代码

<style>     #papa { margin: 20px 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; 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>

愤怒的葡萄

看的有点眼花了

朵拉

异域风情，是印度歌曲么

红影

鼠标移动就会呼唤出美女，这个有趣。背景也印度风情的。漂亮

红影

用伪元素加入图片和视频，伪元素本身还带底色的，美女变大后，头部正好在框里

南无月

伪元素有两个：一个是圆，一个是美人儿，都给了鼠标点击的小手响应。。transform: scale(1.65, 1.65);这个数据控制美人儿变化的宽度和高度。。数据变化可以控制美人儿变化体形。。。

南无月

两个视频和背景都有不同红色元素，深浅不同，合起来的效果如梦似幻，有强烈的视觉冲击力。
伪元素代码有行四行，虽复杂却清晰。这样的构思也是独一无二了。。。
老师创意无限。。
必须多多点赞。。。

马黑黑

南无月 发表于 2024-4-25 17:50
两个视频和背景都有不同红色元素，深浅不同，合起来的效果如梦似幻，有强烈的视觉冲击力。
伪元素代码有行 ...

太多点赞了

谢谢

马黑黑

南无月 发表于 2024-4-25 17:48
伪元素有两个：一个是圆，一个是美人儿，都给了鼠标点击的小手响应。。transform: scale(1.65, 1.65);这个 ...

对，scale 是缩放

马黑黑

红影 发表于 2024-4-25 16:23
用伪元素加入图片和视频，伪元素本身还带底色的，美女变大后，头部正好在框里

有点巧妙吧

马黑黑

红影 发表于 2024-4-25 16:17
鼠标移动就会呼唤出美女，这个有趣。背景也印度风情的。漂亮

马黑黑

朵拉 发表于 2024-4-25 15:41
异域风情，是印度歌曲么

是的

马黑黑

愤怒的葡萄 发表于 2024-4-25 14:58
看的有点眼花了

确实

执著

很有意思，美女挺听话的，要她出来就出来，要她回避就退出。音画着实漂亮！印度曲子好听！

南无月

马黑黑 发表于 2024-4-25 18:02
对，scale 是缩放

小于1就变小了。。大于1就变大了。。
可以让美人有一米八的大长腿。。

南无月

马黑黑 发表于 2024-4-25 18:01
太多点赞了

谢谢

色彩好，构思好，创意好。。。哪哪都好。。才一万个赞不够。。

马黑黑

南无月 发表于 2024-4-25 21:05
色彩好，构思好，创意好。。。哪哪都好。。才一万个赞不够。。

多了多了

马黑黑

南无月 发表于 2024-4-25 21:04
小于1就变小了。。大于1就变大了。。
可以让美人有一米八的大长腿。。

要得

马黑黑

执著 发表于 2024-4-25 20:58
很有意思，美女挺听话的，要她出来就出来，要她回避就退出。音画着实漂亮！印度曲子好听！{:4_190 ...