|
|

楼主 |
发表于 2024-1-21 13:21
|
显示全部楼层
代码
- <style>
- #mydiv {
- position: relative;
- margin: 0 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t24/webp/lklj.webp') no-repeat center/cover;
- box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
- overflow: hidden;
- z-index: 1;
- }
- #mydiv::before {
- position: absolute;
- content: '';
- width: 100%;
- height: 100%;
- background: url('https://638183.freep.cn/638183/t24/webp/llg.webp') no-repeat center/cover;
- clip-path: circle(0%);
- transition: 4s;
- }
- #mydiv:hover::before {
- clip-path: circle(100%);
- }
- #player {
- position: absolute;
- left: 20px;
- top: 20px;
- width: 120px;
- height: 120px;
- cursor: pointer;
- opacity: .45;
- animation: rot 6s infinite linear var(--state);
- }
- #vid {
- position: absolute;
- top: -60px;
- width: 100%;
- height: calc(100% + 60px);
- object-fit: cover;
- mix-blend-mode: screen;
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=289325" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bb9b3e6d93.mp4" loop></video>
- <img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
- </div>
- <script>
- (function() {
- 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);
- mydiv.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
- })();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|