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

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

本帖最后由 马黑黑 于 2025-7-25 16:54 编辑 <br /><br /><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; --state: running; }
        #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 var(--state); 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>

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

红影 发表于 2025-7-25 15:33

奇怪，这个播放器点击暂停时，转动并不停止？

红影 发表于 2025-7-25 15:36

播放器的变色很漂亮，鼠标触碰后的变化也很神奇{:4_199:}
不停止应该就是少了个var(--state)，加上就好了。

红影 发表于 2025-7-25 15:37

花飞飞搬新居了啊，恭喜乔迁之喜{:4_199:}

花飞飞 发表于 2025-7-25 16:43

手机中～这个小播立体感强，呈三叶幸运草形状，色彩变化梦幻迷离～白老师又出了一个迷人的造型～好看^ω^

花飞飞 发表于 2025-7-25 16:47

这个图拍的怎么看怎么好，截取处理的也好{:4_170:}
视频音乐&#127925;都很用心，大爱大赞～

花飞飞 发表于 2025-7-25 16:49

温馨之帖，永远收藏，铭记在心～不谢了哈～{:4_173:}

花飞飞 发表于 2025-7-25 16:50

红影 发表于 2025-7-25 15:37
花飞飞搬新居了啊，恭喜乔迁之喜

问好影子，好久不见～感谢祝福～{:4_187:}

花飞飞 发表于 2025-7-25 16:52

问候所有小伙伴们～{:4_204:}

梦江南 发表于 2025-7-25 17:53

恭喜老师乔迁之喜！{:4_199:}

马黑黑 发表于 2025-7-25 18:01

花飞飞 发表于 2025-7-25 16:49
温馨之帖，永远收藏，铭记在心～不谢了哈～

{:4_191:}

马黑黑 发表于 2025-7-25 18:01

红影 发表于 2025-7-25 15:33
奇怪，这个播放器点击暂停时，转动并不停止？

答案在四楼{:4_170:}

马黑黑 发表于 2025-7-25 18:01

红影 发表于 2025-7-25 15:36
播放器的变色很漂亮，鼠标触碰后的变化也很神奇
不停止应该就是少了个var(--state)，加上就好了 ...

谢谢

马黑黑 发表于 2025-7-25 18:03

花飞飞 发表于 2025-7-25 16:47
这个图拍的怎么看怎么好，截取处理的也好
视频音乐&#127925;都很用心，大爱大赞～

这是 19:9 加背景 cover 的截取方式。图片自身除了格式转换其它未作改动，包括文件名

马黑黑 发表于 2025-7-25 18:04

花飞飞 发表于 2025-7-25 16:43
手机中～这个小播立体感强，呈三叶幸运草形状，色彩变化梦幻迷离～白老师又出了一个迷人的造型～好看^ω^

这个是至简的单标签小播

红影 发表于 2025-7-25 21:39

花飞飞 发表于 2025-7-25 16:50
问好影子，好久不见～感谢祝福～

是啊，好久不见，原来是现实里的事缠身了。
很高兴看到飞飞{:4_179:}

红影 发表于 2025-7-25 21:40

马黑黑 发表于 2025-7-25 18:01
答案在四楼

我还跑回去数，原来4楼是我自己的回复{:4_173:}

红影 发表于 2025-7-25 21:41

马黑黑 发表于 2025-7-25 18:01
谢谢

谢什么啊，一时的疏忽而已{:4_187:}

杨帆 发表于 2025-7-26 00:05

谢谢马老师精彩分享，恭喜花飞飞乔迁之喜{:4_199:}
页: [1] 2 3 4
查看完整版本: 岁月静好（花飞飞新居誌喜）