明镜菩提（to绿叶清舟）

马黑黑

全屏观赏

马黑黑

帖子代码

<style>     #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 680px; background: url('https://638183.freep.cn/638183/t24/1/mkjk.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }     #papa::before { position: absolute; content: ''; inset: -230px; background: rgba(0,0,100,.15) url('https://638183.freep.cn/638183/t24/1/mkjk.jpg') no-repeat center/cover; mix-blend-mode: screen; filter: hue-rotate(260deg) opacity(.45); transform-origin: 70% 0; transform: rotate(10deg); animation: swear 4s infinite alternate var(--state); }     #papa::after { position: absolute; content: ''; right: 100px; bottom: 138px; width: 4px;height: 75px; background: white; z-index: -1; }     #btnplay { position: absolute; right: 40px; bottom: 150px; width: 128px; height: 128px; background: url('https://638183.freep.cn/638183/t23/btn/windmill.png'); cursor: pointer; animation: rot 6s linear infinite var(--state); }     #btnFs { position: absolute; right: 10px; top: 10px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 100; }     #vid { position: absolute; right: 2px; bottom: 0; width: 200px; height: 140px; object-fit: cover; border-radius: 60% 60% 0 0; cursor: pointer; }     @keyframes swear { to { transform: rotate(-5deg); } }     @keyframes rot { to { transform: rotate(360deg); } } </style>
<div id="papa">     <audio id="aud" src="https://file.uhsea.com/2402/2689eeb142253d2c53edffe3718cb8e5EC.mp3"></audio>     <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/19/5d19651c535f9.mp4" muted loop></video>     <div id="btnFs">全屏观赏</div>     <div id="btnplay"></div> </div>
<script> var sF = document.createElement('script'); sF.charset = 'utf-8'; sF.src = 'https://638183.freep.cn/638183/web/api/iy-fs-btn.js'; document.querySelector('body').appendChild(sF); vid.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

马黑黑

关于纯音乐帖子JS独立资源

iy-btn-fs JS独立模块适用于纯音乐或不带lrc歌词的帖子。它由播放控制器+全屏两个部分组成，两个按钮可以是任意可视元素，约定播放控制器id="btnplay"，全屏按钮id="btnFs"，此外，帖子父元素约定id="papa"（是不是传说中的约法三章）。模块的主要功能是控制音频和视频播放暂停，同时提供全屏控制开关并接管CSS的 --state 变量。使用时请参照如下帖子代码结构：

<style>     #papa { position: relative; }     #btnplay { position: absolute; }     #btnFs { position: absolute; } </style>
<div id="papa">     <audio src="音频地址"></audio>     <!-- video src="视频地址" muted loop></video -->     <div id="btnFs">全屏观赏</div>     <div id="btnplay"></div> </div>
<script>     var sF = document.createElement('script');     sF.charset = 'utf-8';     sF.src = 'https://638183.freep.cn/638183/web/js/iy-fs-btn.js';     document.querySelector('body').appendChild(sF); </script>

上述代码：

JS部分是调用资源。

HTML部分，音频和视频可以不要id，web页里的第一个 audio 是JS模块管理的对象，页面中的所有视频也都将接受管理，视频是否静音（muted）根据需要决定，循环播放（loop）必须，自动播放（autoplay）不建议；代码中，video标签处于注释状态，使用时自行修改；id="papa"的div是帖子元素，其id是全屏的操控依赖；全屏按钮和播放按钮必须使用示范代码设置id，不论使用的是div还是img或其他的。

CSS部分，对应HTML标签设计，这里仅列出position定位属性，按父元素relative子元素absolute的方式设置，以方便帖子布局；#btnplay 以及其他选择器，如果调用关键帧动画属性 animation 设置有 var(--state)，则它们控制下的动画将能与音频的播放暂停同步。

梦油

生日礼物独辟蹊径，高！

小辣椒

今天是清舟的生日，黑黑是掐日子送礼

小辣椒

美美的效果，清舟收礼开心

马黑黑

小辣椒 发表于 2024-2-29 12:55
今天是清舟的生日，黑黑是掐日子送礼

应该的应该的，毕竟四年才过一次

马黑黑

小辣椒 发表于 2024-2-29 12:56
美美的效果，清舟收礼开心

马黑黑

梦油 发表于 2024-2-29 12:12
生日礼物独辟蹊径，高！

世外桃源

欣赏老师的梦幻制作

美极了，无论音乐和画面 相得益彰

南无月

今天是正日子，祝@绿叶清舟 生日快乐！

南无月

仔细看了光束效果，原来是一张有颜色的图片进行通过滤镜再转动角度实现彩色光束移动。。
惊叹，这样也可以。。老师创意太厉害 了。
与《一切如常》光束的实现方式完全不同

南无月

这次视频裁剪的形状也特别。。
和大风车搭起来，像是风车驱动视频移动。。。
这两个元素比较童趣

马黑黑

南无月 发表于 2024-2-29 17:11
这次视频裁剪的形状也特别。。
和大风车搭起来，像是风车驱动视频移动。。。
这两个元素比较童趣

严格来讲不是剪裁，是用了 border-radius 属性，圆角属性。

马黑黑

南无月 发表于 2024-2-29 17:09
仔细看了光束效果，原来是一张有颜色的图片进行通过滤镜再转动角度实现彩色光束移动。。
惊叹，这样也可以 ...

这个大家都可以想得到的

马黑黑

南无月 发表于 2024-2-29 17:05
今天是正日子，祝@绿叶清舟 生日快乐！

南无月

马黑黑 发表于 2024-2-29 18:29
严格来讲不是剪裁，是用了 border-radius 属性，圆角属性。

好哒。。。就是可以实现有圆角还有方角。。这个好看

南无月

马黑黑 发表于 2024-2-29 18:29
这个大家都可以想得到的

对哒，你就是大家。。只有大家能想到

南无月

马黑黑 发表于 2024-2-29 18:30

谢茶，绿茶不敢喝。。。

马黑黑

南无月 发表于 2024-2-29 18:32
对哒，你就是大家。。只有大家能想到