生命万岁
本帖最后由 马黑黑 于 2025-8-6 13:11 编辑 <br /><br /><style>/* Viva La Vida */
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2025/viva.webp') no-repeat center/cover; --ma-size: 400px; }
#pa::before { position: absolute; content: url('https://638183.freep.cn/638183/Pic/38/dj3.jpg'); clip-path: inset(0 0 round 75% 0); opacity: 0; transition: 2s; }
#pa:hover::before { opacity: 1; transform: rotate(1turn); }
#ma { background: inherit; clip-path: path('M200 200C 500 200, 322.42461854401756 473.8835752182883,200 200C 292.7050983124842 485.31695488854604, -22.647471257595157 401.0674104438567,200 200C -42.70509831248421 376.335575687742, -60.02832329042673 50.38291846594075,200 200C -42.70509831248427 23.66442431225809, 261.9411294264655 -93.53585212946962,200 200C 292.70509831248415 -85.31695488854609, 498.3100465775387 168.2019480013838,200 200'); scale: 0.8; opacity: .8; box-shadow: inset 0 0 20px 70px rgba(0,30,120,.25); }
#btnFs { left: 20px; bottom: 20px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26989255" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/26/15/03/40/video67e3a6cc9b296.mp4" autoplay loop muted></video>
<div id="ma" class="hue-rotate"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script> 本帖最后由 马黑黑 于 2025-8-6 13:11 编辑 <br /><br /><div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2025/viva.webp') no-repeat center/cover; --ma-size: 400px; }
#pa::before { position: absolute; content: url('https://638183.freep.cn/638183/Pic/38/dj3.jpg'); clip-path: inset(0 0 round 75% 0); opacity: 0; transition: 2s; }
#pa:hover::before { opacity: 1; transform: rotate(1turn); }
#ma { background: inherit; clip-path: path('M200 200C 500 200, 322.42461854401756 473.8835752182883,200 200C 292.7050983124842 485.31695488854604, -22.647471257595157 401.0674104438567,200 200C -42.70509831248421 376.335575687742, -60.02832329042673 50.38291846594075,200 200C -42.70509831248427 23.66442431225809, 261.9411294264655 -93.53585212946962,200 200C 292.70509831248415 -85.31695488854609, 498.3100465775387 168.2019480013838,200 200'); scale: 0.8; opacity: .8; box-shadow: inset 0 0 20px 70px rgba(0,30,120,.25); }
#btnFs { left: 20px; bottom: 20px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26989255" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/26/15/03/40/video67e3a6cc9b296.mp4" autoplay loop muted></video>
<div id="ma" class="hue-rotate"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script>
</div>
<script type="module">
import linenum from 'https://638183.freep.cn/638183/web/js/linenum.js';
linenum();
</script> 歌手：David Garrett
曲名：Viva La Vida
所属专辑：Music (Deluxe Edition) 帖子小播：
使用 id="ma" 的 div制作，400*400，背景与帖子背景同，使用 clip-path 剪裁出五叶草形状。
400*400的尺寸较大，因需要配套 path 路径，尺寸必须这么设置。这个尺寸偏大了，故而使用 scale 属性将其缩小 0.8 倍。scale 属性已经得到所有主流浏览器的支持，但尚未成为正式的 css 标准，我问了下 DS，它不建议使用；不过，经亲自查询，这是可以使用的，只要浏览器版本不是古董级别的都没问题。
关于元素的伸缩，DS认为应优先使用 transform: scale()，就是说，把 scale 当作一个函数而非属性来使用，这才符合css3标准。不过我个人认为，如果这样，那么，需要配套 transform 的其它函数，在设计 @keyframes 动画时，得将 scale 也纳入考虑之列，还要注意函数的出现次序问题，相对麻烦，所以，既然浏览器都已经支持，为何不将 scale 当属性使用？其最大的好处是没有 transform 的各种冲突。
元素的伸缩还可以考虑使用 zoom 属性，虽然它也不是CSS标准，但是浏览器的支持度很高，Firefox也已经支持，opera早已改用chromium内核不存在不支持的问题。 刚看到播放器时，还以为是贴图上去的，看到代码才知道，实际是裁剪凉快底图。
这个底图有意思，这么小的底图被放大到这么大呢{:4_173:} 鼠标触碰会有另一张美女图旋转而入，很漂亮{:4_199:} clip-path: inset(0 0 round 75% 0);
这个形状剪切很有意思啊，
我让它暂停后，发现左下和右上的尖尖部分就是个直角，把直角边延长之后原图是个正方形。。。
75%应该是只保留四分之一，别的都变成弧形了。。
所以就是现在的两头尖，中间圆弧的形状。。{:4_173:}
用了个清凉美人当背景，迷S人了。。 clip-path: inset(0 0 round 75% 0);
这个形状剪切很有意思啊，
我让它暂停后，发现左下和右上的尖尖部分就是个直角，把直角边延长之后原图是个正方形。。。
75%应该是只保留四分之一，别的都变成弧形了。。
所以就是现在的两头尖，中间圆弧的形状。。{:4_173:}
用了个清凉美人当背景，迷S人了。。 马黑黑 发表于 2025-8-6 13:02
帖子小播：
使用 id="ma" 的 div制作，400*400，背景与帖子背景同，使用 clip-path 剪裁出五叶草形状。
...
刚才一激动手抖发了两次。。{:4_173:}
来看这一楼，五叶草小播的裁剪用scale: 0.8;缩放至0.8简单又好用。。。
白老师还分享了思考过程，看来每个细节都是精心打造的，这样的钻研精神令人敬佩 鼠标触碰时，美人儿显现出来，opacity: 1;从0变成了1
小播触碰后色彩变化没看到，是不是在封包里了。。
看了下封包，好多
.hue-rotate:hover {
filter: hue-rotate(300deg);
}
.invert:hover {
filter: invert(1);
}
.brightness:hover {
filter: brightness(2);
}
.grayscale:hover {
filter: grayscale(1);
}
.opacity:hover {
filter: opacity(0.5);
}
.sepia:hover {
filter: sepia(1);
}
这么多种{:4_170:}挑眼花了，缺课太多，有空补补 曲子热烈，充满朝气与活力。。令人振奋{:4_199:} 漂亮！谢谢马老师精彩分享{:4_190:} 杨帆 发表于 2025-8-6 20:01
漂亮！谢谢马老师精彩分享
{:4_191:} 花飞飞 发表于 2025-8-6 17:58
曲子热烈，充满朝气与活力。。令人振奋
{:4_191:} 花飞飞 发表于 2025-8-6 17:57
鼠标触碰时，美人儿显现出来，opacity: 1;从0变成了1
小播触碰后色彩变化没看到，是不是在封包里了。。
...
这个不用补，了解一下即可，用时记不住查查 花飞飞 发表于 2025-8-6 17:52
刚才一激动手抖发了两次。。
来看这一楼，五叶草小播的裁剪用scale: 0.8;缩放至0.8简单又好用 ...
熟悉浏览器的，CSS的，都知道这个 花飞飞 发表于 2025-8-6 17:46
clip-path: inset(0 0 round 75% 0);
这个形状剪切很有意思啊，
我让它暂停后，发现左下和右上的尖尖部分 ...
边框的设置 红影 发表于 2025-8-6 13:32
鼠标触碰会有另一张美女图旋转而入，很漂亮
{:4_191:} 红影 发表于 2025-8-6 13:31
刚看到播放器时，还以为是贴图上去的，看到代码才知道，实际是裁剪凉快底图。
这个底图有意思，这么小的底 ...
这是谷歌格式的图片，.webp，它的算法太强悍，图片被严重压缩的情况下还能保持较好的品质 马黑黑 发表于 2025-8-6 20:42
这个一看就是果子酒，可以多喝几杯