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> <style>
.codebox {
margin: 20px 10px;
padding: 10px 12px;
background: beige;
box-shadow: 0 0 1px rgba(0,0,0,.9);
position: relative;
}
.codebox li {
font: normal 16px/20px Consolas, 'Courier New', 'Andale Mono', monospace;
white-space: pre-wrap;
tab-size: 4;
color: #000;
padding: 0 10px;
word-break:break-all;
}
</style>
<p>代码</p>
<div id="hbox">
<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>
</div>
<script>
addLineNumber(hbox);
function addLineNumber(div) {
if (!div instanceof Element) return;
div.classList.add('codebox');
const lines = div.innerHTML.trim().split('\n');
const total = lines.length;
const ol = document.createElement('ol');
lines.forEach( (line, key) => {
const li = document.createElement('li');
li.innerHTML = line;
ol.appendChild(li);
});
div.innerHTML = '';
div.appendChild(ol);
}
</script> 刚发现视频剪切方式与之前不同，现在瞅了封装，里面有两个pd-vid，和qk-vid两种封装方式。。。
这里用的是pd-vid，试着换了一下，这个是熊猫啊。。。那么另外一个就是千库啦。。。
好方便，连不同网站的视频都封好了，自己选用。。{:4_173:}
这一个月代码变化好大啊。。 第三行背景代码里多了一个--ma-size: 260px;看了几个贴都是260，是小播大小。。看来以后就固定它了。。
CSS里还封有标题文字设置。。。
这也太全乎了{:4_199:}好用。。 小播先是给了个绿色的投影设置，构思绝妙，投影和光晕结合起来使用，令小播有立体感。。画面层次更加丰富。。
小播是圆角裁切出形状，用了径向渐变，中间深四周浅。。漂亮。。
旋转角度得到三个叶片，像是幸运三叶草，当然可以四个五个的{:4_173:}
赞叹，代码简洁，效果唯美。。 花飞飞 发表于 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，国宝
所以么，英文盲还是猜对了。。。
这个封装构思很妙，太顺手了。。挺全乎的。{:4_173:} 发现一个奇特的事：当把屏幕下拉，让小播拉到刚被遮住，它下面的投影就不见了？
投影是代码设置的，和屏幕卷动应该没关系吧？要不是我电脑问题？我这会在乡下，用着旧电脑。
希望这个不是又一次的错误，我已经错俩了。 花飞飞 发表于 2025-8-3 09:03
第三行背景代码里多了一个--ma-size: 260px;看了几个贴都是260，是小播大小。。看来以后就固定它了。。
C ...
也不一定是 260，250也是可以滴{:4_170:}
可根据需要设置此值，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 值跟着 ...
好哒，三叶草幸运草呢。原来增加还要另外计算{:4_170:}，
我还想可以把这个片片裁的瘦一点，多整几片，那还是算了 红影 发表于 2025-8-3 09:36
看到标题里的des挺激动，以为是德语，不觉想起当时的die der des 之类的，然后去搜索，哈哈，这个标题是法 ...
德语、法语、英语等都属于拉丁语系，德语和法语的相似度较高。 这三瓣的小播在css里就设置完了，都不需要js 帮忙，真省力啊。
小播的投影颜色设置也好看，前面的投影的例子看到都设置的黑色的，这个顺着小播的颜色设置的，好看{:4_187:} 马黑黑 发表于 2025-8-3 09:41
也不一定是 260，250也是可以滴
可根据需要设置此值，tz01.css 里是基于帖子容器尺寸设计， ...
250好经典，有机会千万得用用。。{:4_170:}
原来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
好哒，三叶草幸运草呢。原来增加还要另外计算，
我还想可以把这个片片裁的瘦一点，多整几片， ...
减肥简单的呀，前提是得吃的饱饱的