Branle des Souris

马黑黑

马黑黑

代码

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/ca7.webp') no-repeat center/cover; --ma-size: 260px; } .wrap { position: absolute; bottom: 200px; width: 200px; height: 200px; filter: drop-shadow(0 240px 10px rgba(144,238,144,.5)); } .son { --a: 0; position: absolute; top: 25%; width: 50%; height: 25%; background: radial-gradient(darkgreen, lightgreen); border-radius: 50% 50% 0 50%; box-shadow: 2px 2px 8px rgba(0,0,0,.6); transform-origin: 100% 100%; transform: rotate(var(--a)); } .son:nth-of-type(2) { --a: 120deg; } .son:nth-of-type(3) { --a: 240deg; } #btnFs { right: 20px; top: 20px; color: #eee; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2749701" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/37/5b41d30e75884.mp4" autoplay loop muted></video> <div class="wrap"> <div id="ma"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> </div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; FS(pa, ma); </script>

花飞飞

刚发现视频剪切方式与之前不同，现在瞅了封装，里面有两个pd-vid，和qk-vid两种封装方式。。。
这里用的是pd-vid，试着换了一下，这个是熊猫啊。。。那么另外一个就是千库啦。。。
好方便，连不同网站的视频都封好了，自己选用。。
这一个月代码变化好大啊。。

花飞飞

第三行背景代码里多了一个--ma-size: 260px;看了几个贴都是260，是小播大小。。看来以后就固定它了。。
CSS里还封有标题文字设置。。。
这也太全乎了好用。。

花飞飞

小播先是给了个绿色的投影设置，构思绝妙，投影和光晕结合起来使用，令小播有立体感。。画面层次更加丰富。。
小播是圆角裁切出形状，用了径向渐变，中间深四周浅。。漂亮。。
旋转角度得到三个叶片，像是幸运三叶草，当然可以四个五个的
赞叹，代码简洁，效果唯美。。

马黑黑

花飞飞 发表于 2025-8-3 08:56
刚发现视频剪切方式与之前不同，现在瞅了封装，里面有两个pd-vid，和qk-vid两种封装方式。。。
这里用的是 ...

qk = 千库
pd = panda，国宝

红影

看到标题里的des挺激动，以为是德语，不觉想起当时的die der des 之类的，然后去搜索，哈哈，这个标题是法语的，不觉大笑，瞧我这德行，当年学的都还给老师了。

马黑黑

花飞飞 发表于 2025-8-3 09:10
小播先是给了个绿色的投影设置，构思绝妙，投影和光晕结合起来使用，令小播有立体感。。画面层次更加丰富。 ...

这个小播用三叶草最合适。如果是N多叶草（N>3），需要调整 .son 的 height 属性值，让它更小，top 值跟着调整（二者加起来是50%），角度另外计算（360/N*序号）。

红影

看到彩色向右飘飞的粒子，以为是渐变色遮罩的具体例子，还在想，这些渐变粒子好美啊。
看了代码，这些粒子原来是视频，不禁又一次大笑。这出错咋还接二连三起来了。

花飞飞

马黑黑 发表于 2025-8-3 09:34
qk = 千库
pd = panda，国宝

所以么，英文盲还是猜对了。。。
这个封装构思很妙，太顺手了。。挺全乎的。

红影

发现一个奇特的事：当把屏幕下拉，让小播拉到刚被遮住，它下面的投影就不见了？
投影是代码设置的，和屏幕卷动应该没关系吧？要不是我电脑问题？我这会在乡下，用着旧电脑。
希望这个不是又一次的错误，我已经错俩了。

马黑黑

花飞飞 发表于 2025-8-3 09:03
第三行背景代码里多了一个--ma-size: 260px;看了几个贴都是260，是小播大小。。看来以后就固定它了。。
C ...

也不一定是 260，250也是可以滴

可根据需要设置此值，tz01.css 里是基于帖子容器尺寸设计，用百分比。这个帖子，ma 用一个 wrap 封装，wrap 设置为 200* 200，--ma-size 的值超过了它，就用 --ma-size 的值；如果行和 .wrap 设置的尺寸一样，则 --ma-size: 100%;

花飞飞

马黑黑 发表于 2025-8-3 09:37
这个小播用三叶草最合适。如果是N多叶草（N>3），需要调整 .son 的 height 属性值，让它更小，top 值跟着 ...

好哒，三叶草幸运草呢。原来增加还要另外计算，
我还想可以把这个片片裁的瘦一点，多整几片，那还是算了

马黑黑

红影 发表于 2025-8-3 09:36
看到标题里的des挺激动，以为是德语，不觉想起当时的die der des 之类的，然后去搜索，哈哈，这个标题是法 ...

德语、法语、英语等都属于拉丁语系，德语和法语的相似度较高。

红影

这三瓣的小播在css里就设置完了，都不需要js 帮忙，真省力啊。
小播的投影颜色设置也好看，前面的投影的例子看到都设置的黑色的，这个顺着小播的颜色设置的，好看

花飞飞

马黑黑 发表于 2025-8-3 09:41
也不一定是 260，250也是可以滴

可根据需要设置此值，tz01.css 里是基于帖子容器尺寸设计， ...

250好经典，有机会千万得用用。。
原来200*200才是封装标准。。还有大小之分。。
应该是无论超过200和小于200都用的是--ma-size 的值吧。。。
100%的碰巧用

马黑黑

红影 发表于 2025-8-3 09:41
发现一个奇特的事：当把屏幕下拉，让小播拉到刚被遮住，它下面的投影就不见了？
投影是代码设置的，和屏幕 ...

这种情况下，阴影实际上没有消失，是弱化了，好的显示器还能依稀看到阴影。

原理：论坛顶部的导航条在翻页翻到一定的程度后会一直保留在顶部，它的z-index层级设置为较高，帖子与之重叠时会将帖子置于其下。当重叠区域恰好是小播，小播处于被遮挡的状态，而阴影反映的是宿主的样貌，宿主被有一定透明度的导航条遮挡，阴影能折射出来的宿主轮廓就只能是导航条让出的透明部分的色彩，所以极度淡化了

马黑黑

花飞飞 发表于 2025-8-3 09:47
250好经典，有机会千万得用用。。
原来200*200才是封装标准。。还有大小之分。。
应该是无论 ...

如果有 --ma-size 属性值设置，优先用它；但是，如果重新 #ma { width: 250px; height: 250px; }，则 250 更具优先级

马黑黑

红影 发表于 2025-8-3 09:44
这三瓣的小播在css里就设置完了，都不需要js 帮忙，真省力啊。
小播的投影颜色设置也好看，前面的投影的例 ...

之所以设置为浅绿色，是因为水中的其它倒影都是绿色系的

马黑黑

花飞飞 发表于 2025-8-3 09:43
好哒，三叶草幸运草呢。原来增加还要另外计算，
我还想可以把这个片片裁的瘦一点，多整几片， ...

减肥简单的呀，前提是得吃的饱饱的