查看: 582|回复: 24

[单图] 【黑师代码学习贴】水母的爱情 (TO:司敏儿)

[复制链接]
发表于 2024-6-22 21:34 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-6-23 13:21 编辑

评分

7

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-6-22 21:36 | 显示全部楼层
@司敏儿 看看这个是不是你要的飘浮效果。水母随鼠标移动飘浮。触碰到水母,会变小一些

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-6-22 21:38 | 显示全部楼层
背景图和视频都用了你原来的图,换了一个会动的小水母当小播

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-6-22 21:39 | 显示全部楼层
<style> #mydiv {     margin: 30px 0 30px calc(50% - 831px);     width: 1400px;     height: 800px;     background: url('https://gd-hbimg.huaban.com/994ee5c7f8952870d132ade9b8affef1040512dd50666-gajIAQ_fw1200') no-repeat center/cover;     box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;     overflow: hidden;     z-index: 1;     position: relative; } #player {     position: absolute;     left: 10px;     top: 10px;     --size: 360px;     width: var(--size);     height: var(--size);     transition: 3s; transform: rotate(270deg);     cursor: pointer;mix-blend-mode: screen;   } #player:hover { --size: 160px; } #vid {     position: absolute;     bottom: 0;     width: 100%;     height: calc(100% + 100px);     object-fit: cover;     pointer-events: none;     mix-blend-mode: screen; }   </style>   <div id="mydiv">     <video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/97/5b4eac286249a.mp4" loop muted></video>     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1989498115" autoplay loop></audio>     <img id="player" src="https://pic.imgdb.cn/item/6676d129d9c307b7e9f2b619.gif" alt="" /> </div>   <script>   (function() {     let timer = null, sF = document.createElement('script');     sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';     sF.charset = 'utf-8';     document.querySelector('body').appendChild(sF);     sF.onload = () => FS({papa: '#mydiv'});     mydiv.onmousemove = function(e) {         clearTimeout(timer);         timer = setTimeout(function() {             if(e.target.id === 'player') return;             let x = e.offsetX | e.layerX, y = e.offsetY | e.layerY, sw = player.offsetWidth;             if(x < 0) x = 0;             if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;             if(y < 0) y = 0;             if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;             player.style.cssText += `left: ${x}px; top: ${y}px`;         }, 400);     }       let mState = () => aud.paused         ? (mydiv.style.setProperty('--state','paused'), vid.pause())         : (mydiv.style.setProperty('--state','running'), vid.play());     aud.addEventListener('playing', mState);     aud.addEventListener('pause', mState);     player.onclick = () => aud.paused ? aud.play() : aud.pause(); })();   </script>  

评分

4

查看全部评分

点评
回复

使用道具

发表于 2024-6-22 21:49 | 显示全部楼层
艾玛,都是代码高手,厉害

评分

2

查看全部评分

点评
回复

使用道具

发表于 2024-6-22 21:50 | 显示全部楼层
欣赏学习钓雪带来的精美作品

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-6-22 21:50 | 显示全部楼层
问好钓雪,感谢你的精彩分享

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-6-22 21:51 | 显示全部楼层
祝敏儿收礼开心,周末好心情!

评分

2

查看全部评分

点评
回复

使用道具

发表于 2024-6-22 21:52 | 显示全部楼层
祝钓雪创作愉快,周末好心情

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-6-22 22:14 | 显示全部楼层
雨声 发表于 2024-6-22 21:50
问好钓雪,感谢你的精彩分享

非常感谢雨声支持

评分

1

查看全部评分

点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-10 21:54

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表