守岸人

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.     .pa { --offsetX: 81px; background: url('https://638183.freep.cn/638183/t24/w7/uar.webp') no-repeat center/cover; }
   
4.     .son { width: 75px; height: 160px; background: url('https://638183.freep.cn/638183/small/2025/fl1026.gif') no-repeat 50% 0/50% 50%; }
   
5. </style>
   
6. 
   
7. <div id="pa" class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
11.     const tz = TZ.TZ('pa');
    
12.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2632543726'});
    
13.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/3664703/00/02/09/5b505a6fa6e29.mp4'});
    
14.     tz.add('div', 'player', 'wrap100 hue-rotate rotate-ani', {style: 'cursor: pointer'}).playmp3();
    
15.     tz.lzRot(6, 'player', {className: 'son'});
    
16.     tz.fs().style('right: 20px; bottom: 20px');
    
17. </script>

复制代码

小播还是元素旋转（第 15 行代码）：6 个元素，容器 player，元素类名 son（对应CSS .son {} 选择器，第 4 行代码）。具体构图思路楼下谈。

马黑黑

小播：容器元素 + 绕圈旋转子元素

        容器元素 id="player"，代码在第 14行。使用三个 class 类名：wrap100 负责尺寸和大部分的样式设计，hue-rotate 负责指针移动交互，rotate-ani 负责动画。

        绕圈子元素共 6 个，需要指明 player 父元素，给出自己的 className 名称 son 记对应的 CSS .class 选择器（代码第 16 行）。重点在CSS设置（代码第 4 行）中简写形式的 background-* 属性——

        50% 0 / 50% 50%

50% 0 为 background-position，50%是水平方向的位置，定在中央，即水平方向居中、显示实背景，0 为垂直方向的位置，从顶部开始显示背景；

50% 50% 为 background-size，也同样分为水平方向尺寸和垂直方向尺寸（建议分开设置）。尺寸基于原始图像，配套元素 width 和 height 的设置技巧将图片缩小一般呈现，具体做法：son 的宽高设置为原始图片的实际宽高，背景影像的尺寸则取原始图片的一半尺寸（50% 50%），且背景的位置在 son 元素上水平居中、垂直靠顶，就达到背景图片在 son 的上半部的效果。

background-position、background-size 生效的前提，background-repeat: no-repeat

杨帆

小播的构图技术含量挺高呢，谢谢马老师经典讲授与示范

感觉也可采用前贴[清音纯乐] Last Reunion的构图办法，此时的旋转中心该如何确定呢？

马黑黑

杨帆 发表于 2025-12-1 13:07
小播的构图技术含量挺高呢，谢谢马老师经典讲授与示范

感觉也可采用前贴[清音纯乐] Last Reuni ...

上一帖小播内的子元素采用”元素+伪元素“的方法构图，伪元素和其主元素一样的高度并衔接在主元素的底部，整体超出容器元素的高度，所以往上拉扯50%，此时元素的旋转中心应设在底部正中（50% 100%）；

现在这帖，小播内的子元素没有超出父元素的的区域，无需设置旋转中心，默认使用元素的中心点。如果本帖也采用上一帖的做法，那就不是本帖，请按上一帖的制作方式构图，构图核心在于将伪元素视为子元素的一部分并设法让整体的中心点处在小播元素（容器元素）的中心点。

杨帆

马黑黑 发表于 2025-12-1 13:21 上一帖小播内的子元素采用”元素+伪元素“的方法构图，伪元素和其主元素一样的高度并衔接在主元素的底部 ...

马老师，您好~按上一帖的制作方式构图 将伪元素视为子元素的一部分，效果可以实现 如何实现让旋转后的整体的中心点处在小播元素（容器元素）的中心点呢~

红影

这个主要是讲小播图图的 background-属性设置吧，斜杠前面是位置，后面是尺寸。
学习了。

红影

这个动态小播真好看，底图也好看，黑黑做这类风格的时候很少的

马黑黑

红影 发表于 2025-12-1 16:34
这个动态小播真好看，底图也好看，黑黑做这类风格的时候很少的

不会吧？很多的

马黑黑

红影 发表于 2025-12-1 16:33
这个主要是讲小播图图的 background-属性设置吧，斜杠前面是位置，后面是尺寸。
学习了。

如果不喜欢简写，你可以：

background-color: olive;
background-image: url('图片地址');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: 100% 50%;

马黑黑

杨帆 发表于 2025-12-1 14:58
本帖最后由 杨帆 于 2025-12-1 15:23 编辑

马老师，您好~按上一帖的制作方式构图

你应该是还理解不了元素和元素伪元素组合的概念，等下我写一个示例，敬请关注

红影

马黑黑 发表于 2025-12-1 19:13
不会吧？很多的

这个是二次元的风格吧，黑黑弄这类风格很多的么，貌似也真的不少

杨帆

马黑黑 发表于 2025-12-1 19:16
你应该是还理解不了元素和元素伪元素组合的概念，等下我写一个示例，敬请关注

期待中谢谢老师，尤其是元素和元素伪元素组合的概念

红影

马黑黑 发表于 2025-12-1 19:15
如果不喜欢简写，你可以：

background-color: olive;

其实还是分开来写的更容易理解

马黑黑

杨帆 发表于 2025-12-1 20:09
期待中，谢谢老师，尤其是元素和元素伪元素组合的概念

CSS伪元素是个抽象概念，但它在渲染时有时很具象

马黑黑

红影 发表于 2025-12-1 20:08
这个是二次元的风格吧，黑黑弄这类风格很多的么，貌似也真的不少

其实很多

马黑黑

红影 发表于 2025-12-1 20:09
其实还是分开来写的更容易理解

从理解角度看，是

杨帆

马黑黑 发表于 2025-12-1 20:10
CSS伪元素是个抽象概念，但它在渲染时有时很具象

忽然想到了three.js中的精灵，CSS伪元素使用也一样灵活性极强，但效果挺神奇哇

红影

马黑黑 发表于 2025-12-1 20:11
其实很多

黑黑还挺童趣的，这类背景也很有趣呢。

红影

马黑黑 发表于 2025-12-1 20:11
从理解角度看，是

从书写角度，还是简写形式的好。