|
|

楼主 |
发表于 2024-7-12 07:42
|
显示全部楼层
帖子代码
- <style>
- #mydiv {
- --width: 1280px;
- margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
- width: var(--width);
- height: 700px;
- background: radial-gradient(circle, transparent, silver, lightgreen, cyan);
- box-shadow: 3px 3px 6px #333;
- pointer-events: none;
- overflow: hidden;
- position: relative;
- }
- #mydiv::before, #mydiv::after {
- position: absolute;
- content: '';
- }
- #mydiv::before {
- inset: 0;
- background: rgba(0, 100, 100, .15);
- }
- #mydiv::after {
- width: 100px;
- height: 100px;
- top: 40px;
- left: calc(50% - 50px);
- background: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
- filter: drop-shadow(0 0 26px lightblue);
- pointer-events: auto;
- cursor: pointer;
- animation: rot 8s linear infinite var(--state);
- }
- #vid {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: calc(100% + 70px);
- object-fit: cover;
- mix-blend-mode: color-burn;
- opacity: .75;
- }
- @keyframes rot {
- to { transform: rotate(360deg); }
- }
- </style>
- <div id="mydiv" title="播放/暂停">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2103389092" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.mp4" muted loop autoplay disablePictureInPicture></video>
- </div>
- <script>
- aud.oncanplay = aud.onplaying = aud.onpause = () => {
- aud.paused ? vid.pause() : vid.play();
- mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
- mydiv.title = ['暂停','播放'][+aud.paused];
- }
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
很给力! |
南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|