|
|

楼主 |
发表于 2024-7-5 12:32
|
显示全部楼层
帖子代码:
- <style>
- #mydiv { --width: 1280px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px; background-image: radial-gradient(circle at center center, rgb(143, 39, 176) 0%, rgb(143, 39, 176) 11%,rgb(128, 38, 169) 11%, rgb(128, 38, 169) 13%,rgb(113, 38, 163) 13%, rgb(113, 38, 163) 17%,rgb(98, 37, 156) 17%, rgb(98, 37, 156) 28%,rgb(83, 37, 150) 28%, rgb(83, 37, 150) 40%,rgb(68, 36, 143) 40%, rgb(68, 36, 143) 72%,rgb(53, 36, 137) 72%, rgb(53, 36, 137) 81%,rgb(38, 35, 130) 81%, rgb(38, 35, 130) 100%); box-shadow: 4px 3px 8px #666; overflow: hidden; position: relative; display: grid; place-items: center; --bgsize: 25%; }
- #mydiv::before, #mydiv::after { position: absolute; content: ''; width: 100%; height: 100%; background-image: inherit; background-size: var(--bgsize); opacity: .4; transform: rotate(-45deg); pointer-events: none; animation: chg .25s linear infinite alternate var(--state); }
- #mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }
- #player { position: absolute; width: 102px; filter: hue-rotate(0deg); transition: width .5s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }
- #player:hover { width: 120px; }
- @keyframes chg { to { --bgsize: 100%; } }
- @keyframes rot { to { transform: rotate(360deg); } }
- @keyframes hue { to { filter: hue-rotate(360deg); } }
- </style>
- <div id="mydiv">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1841432385" autoplay loop></audio>
- <img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" titel="播放/暂停" />
- </div>
- <script>
- var 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',
- css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
- });
- var mState = () => {
- mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
- player.title = ['暂停','播放'][+aud.paused];
- };
- aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
- player.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|