岁月静好（花飞飞新居誌喜）

马黑黑 · 发表于 2025-7-25 13:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-7-25 16:54 编辑

马黑黑 · 发表于 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>