马黑黑 发表于 2025-8-19 12:31

2d组合圆环小播样式

<div class="codebox" data-prev="1">
&lt;style&gt;
        .ma {
                width: 200px;
                height: 100px;
                filter: drop-shadow(2px 2px 8px gray);
                transition: 2s;
                position: relative;
                margin: 100px auto;
        }
        .ma:hover .son:nth-of-type(2) { --x: 200px; }
        .ma:hover .son:nth-of-type(3) { --x: -200px; }
        .son {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                transform: translate(var(--x)) rotate(var(--a));
                transition: 2s;
                --a: 0deg;
                --b: magenta;
                --x: 0px;
        }
        .son::before, .son::after {
                position: absolute;
                content: '';
                inset: 0;
                border: 4px solid var(--b);
                border-radius: 50%;
                transform: rotateX(60deg) rotateY(150deg);
                box-shadow: inset 0 0 24px lightblue;
        }
        .son::after {
                transform: rotateY(30deg);
        }
        .son:nth-of-type(2) { --a: 120deg; --b: teal; --x: 0px; }
        .son:nth-of-type(3) { --a: 240deg; --b: orange; --x: 0px; }
&lt;/style&gt;

&lt;div class="ma"&gt;
        &lt;div class="son"&gt;&lt;/div&gt;
        &lt;div class="son"&gt;&lt;/div&gt;
        &lt;div class="son"&gt;&lt;/div&gt;
&lt;/div&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-19 12:32

:hover 伪类的设置仅为拆解观察各圆环原形之用

杨帆 发表于 2025-8-19 13:13

2D组合，3D效果，还有拆解，马老师太厉害了{:4_191:}

红影 发表于 2025-8-19 14:20

这样组成的圆环真漂亮，其中的一个圆环还因为x轴的转动看着更细了，这样的两个圆环再转两个120度，一个完美的圆环小播就出现了{:4_199:}

马黑黑 发表于 2025-8-19 18:21

红影 发表于 2025-8-19 14:20
这样组成的圆环真漂亮，其中的一个圆环还因为x轴的转动看着更细了，这样的两个圆环再转两个120度，一个完美 ...

这是2d的效果

马黑黑 发表于 2025-8-19 18:21

杨帆 发表于 2025-8-19 13:13
2D组合，3D效果，还有拆解，马老师太厉害了

{:4_190:}

梦江南 发表于 2025-8-19 18:45

看到了。黑黑老师晚上好！

马黑黑 发表于 2025-8-19 18:57

梦江南 发表于 2025-8-19 18:45
看到了。黑黑老师晚上好！

{:4_190:}

红影 发表于 2025-8-19 21:03

马黑黑 发表于 2025-8-19 18:21
这是2d的效果

感觉旋转和单独设定的x y的旋转，效果是不一样的。

马黑黑 发表于 2025-8-19 21:34

红影 发表于 2025-8-19 21:03
感觉旋转和单独设定的x y的旋转，效果是不一样的。

对。2d也有xyz

红影 发表于 2025-8-19 22:28

马黑黑 发表于 2025-8-19 21:34
对。2d也有xyz

单独去操控，可以得到奇妙的效果呢{:4_187:}

马黑黑 发表于 2025-8-19 23:10

红影 发表于 2025-8-19 22:28
单独去操控，可以得到奇妙的效果呢

当然

花飞飞 发表于 2025-8-20 11:44

这个小播形状特别好看。。
鼠标触碰左右分开，想到一个故事场景，可以设成三个跳舞的人叠在一起，触碰后进行分身。。{:4_173:}

马黑黑 发表于 2025-8-20 12:10

花飞飞 发表于 2025-8-20 11:44
这个小播形状特别好看。。
鼠标触碰左右分开，想到一个故事场景，可以设成三个跳舞的人叠在一起，触碰后进 ...

完全可以

花飞飞 发表于 2025-8-20 17:07

马黑黑 发表于 2025-8-20 12:10
完全可以

{:4_173:}想着容易做着难，刚试了一下好象有点麻烦

马黑黑 发表于 2025-8-20 17:55

花飞飞 发表于 2025-8-20 17:07
想着容易做着难，刚试了一下好象有点麻烦

主要是切割数据。开始学的时候，你可以在纸上画图，计算自己设计的每一个点的百分比，多练几次，上手了就可以空中建楼阁了

红影 发表于 2025-8-20 21:12

马黑黑 发表于 2025-8-19 23:10
当然

简直是妙不可言{:4_187:}

马黑黑 发表于 2025-8-20 21:24

红影 发表于 2025-8-20 21:12
简直是妙不可言

简单的多边形切割数据的设计是可以手工完成的

红影 发表于 2025-8-20 22:19

马黑黑 发表于 2025-8-20 21:24
简单的多边形切割数据的设计是可以手工完成的

是的，然后用js按不同角度间隔，铺展开来。

马黑黑 发表于 2025-8-21 12:16

红影 发表于 2025-8-20 22:19
是的，然后用js按不同角度间隔，铺展开来。

对，这是高效的工作方式
页: [1] 2 3
查看完整版本: 2d组合圆环小播样式