|
|

楼主 |
发表于 2024-1-22 19:39
|
显示全部楼层
帖子代码
- <style>
- #mydiv { position: relative; margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 750px; background: url('https://638183.freep.cn/638183/t24/jpg/w0.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #000; overflow: hidden; z-index: 1; cursor: pointer; --x0: 50%; }
- #mydiv::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/jpg/w1.jpeg') no-repeat center/cover; clip-path: polygon(var(--x0) 0, 100% var(--x0), calc(100% - var(--x0)) 100%, 0 calc(100% - var(--x0))); transition: all .65s; }
- #mydiv:hover::before { opacity: .8; transform: scale(.5); }
- #vid { position: absolute; top: -65px; width: 100%; height: calc(100% + 65px); width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
- </style>
- <div id="mydiv">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867133102" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/78/5e61212dad135.mp4" autoplay loop></video>
- </div>
- <script>
- (function() {
- let step = 1, x0 = 50;
- let mState = () => aud.paused ? vid.pause() : vid.play();
- let clipBg = () => {
- x0 += step;
- if(x0 >= 100 || x0 <= 0) step = -step;
- mydiv.style.setProperty('--x0', x0 + '%');
- };
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('playing', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('timeupdate', clipBg, false);
- })();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|