生命万岁

马黑黑

马黑黑

<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>

马黑黑

歌手：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内核不存在不支持的问题。

红影

刚看到播放器时，还以为是贴图上去的，看到代码才知道，实际是裁剪凉快底图。
这个底图有意思，这么小的底图被放大到这么大呢

红影

鼠标触碰会有另一张美女图旋转而入，很漂亮

花飞飞

clip-path: inset(0 0 round 75% 0);
这个形状剪切很有意思啊，
我让它暂停后，发现左下和右上的尖尖部分就是个直角，把直角边延长之后原图是个正方形。。。
75%应该是只保留四分之一，别的都变成弧形了。。
所以就是现在的两头尖，中间圆弧的形状。。
用了个清凉美人当背景，迷S人了。。

花飞飞

clip-path: inset(0 0 round 75% 0);
这个形状剪切很有意思啊，
我让它暂停后，发现左下和右上的尖尖部分就是个直角，把直角边延长之后原图是个正方形。。。
75%应该是只保留四分之一，别的都变成弧形了。。
所以就是现在的两头尖，中间圆弧的形状。。
用了个清凉美人当背景，迷S人了。。

花飞飞

马黑黑 发表于 2025-8-6 13:02
帖子小播：

使用 id="ma" 的 div制作，400*400，背景与帖子背景同，使用 clip-path 剪裁出五叶草形状。
...

刚才一激动手抖发了两次。。
来看这一楼，五叶草小播的裁剪用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);
}

这么多种挑眼花了，缺课太多，有空补补

花飞飞

曲子热烈，充满朝气与活力。。令人振奋

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-8-6 20:01
漂亮！谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-8-6 17:58
曲子热烈，充满朝气与活力。。令人振奋

马黑黑

花飞飞 发表于 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
鼠标触碰会有另一张美女图旋转而入，很漂亮

马黑黑

红影 发表于 2025-8-6 13:31
刚看到播放器时，还以为是贴图上去的，看到代码才知道，实际是裁剪凉快底图。
这个底图有意思，这么小的底 ...

这是谷歌格式的图片，.webp，它的算法太强悍，图片被严重压缩的情况下还能保持较好的品质

花飞飞

马黑黑 发表于 2025-8-6 20:42

这个一看就是果子酒，可以多喝几杯