|
|

楼主 |
发表于 2024-1-20 14:08
|
显示全部楼层
代码
- <style>
- #mydiv {
- margin: 0 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t24/jpg/kxbj.jpg') no-repeat center/cover;
- box-shadow: 4px 4px 12px rgba(0,0,0,.7);
- border: 1px solid gray;
- overflow: hidden;
- z-index: 1;
- position: relative;
- }
- #vid {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- mix-blend-mode: screen;
- clip-path: inset(52% 0 0 0);
- }
- #player {
- position: absolute;
- left: calc(50% - 100px);
- top: 20%;
- width: 200px;
- height: 200px;
- cursor: pointer;
- mix-blend-mode: overlay;
- animation: rot 6s infinite linear var(--state);
- }
- li-zi {
- position: absolute;
- bottom: -20px;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background-image: radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .5));
- box-shadow: inset 0 0 6px #fff;
- opacity: 1;
- }
- @keyframes rise {
- 20% { transform: translate(0,-20px); opacity: .8; }
- 40% { transform: translate(var(--x1), -20px); opacity: .6; }
- 100% { transform: translate(var(--x2), -360px); opacity: 0; }
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1879108774" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/71/5b48b6cbb4677.mp4" loop muted></video>
- <img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
- </div>
- <script>
- (function() {
- let tt = 60;
- Array.from({length: tt}).forEach((lz,idx) => {
- lz = document.createElement('li-zi');
- lz.style.cssText += `
- --x1: ${Math.random() < 0.5 ? -60 : 60}px;
- --x2: ${Math.random() < 0.5 ? -160 : 160}px;
- left: ${Math.floor((1024 - 30) * Math.random())}px;
- animation: rise ${Math.random() * 6 + 6}s ${Math.random() * -3}s infinite var(--state);
- `;
- mydiv.prepend(lz);
- });
- let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
- aud.addEventListener('playing', mState, false);
- aud.addEventListener('pause', mState, false);
- player.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
- })();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|