|
|

楼主 |
发表于 2025-7-25 13:57
|
显示全部楼层
帖子参考代码
- <style>
- #pa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/w4/1753419819283.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; position: relative; }
- #player { position: absolute;left: calc(50% - 120px); bottom: 150px;aspect-ratio: 5/3; width: 120px; background: radial-gradient(circle at 10% 10%, red, orange); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px gold, 2px 4px 16px rgba(0,0,0,.5); transition: 2s; transform-origin: 100% 100%; animation: rot 6s linear infinite; cursor: pointer; }
- #player::before, #player::after { content: ''; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: inherit; box-shadow: inherit; transform-origin: inherit; transform: rotate(120deg); }
- #player::after { transform: rotate(240deg); }
- #player:hover { filter: unset !important; }
- #btnFs { left: 20px; bottom: 20px; color: #eee; }
- .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .45; pointer-events: none; }
- @keyframes rot {
- to { transform: rotate(1turn); }
- }
- </style>
- <div id="pa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2623287643" autoplay loop></audio>
- <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/05/30/15/50/04/video66582fac638e1.mp4" autoplay loop muted></video>
- <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/18/02/video63662a4a64794.mp4" autoplay loop muted></video>
- <div id="player"></div>
- </div>
- <script type="module">
- import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
- FS(pa, player);
- player.onanimationiteration = () => player.style.setProperty('filter', `hue-rotate(${30 + Math.random() * 180}deg)`);
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
花飞飞
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|