请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<style>
.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; }
</style>
<div class="ma">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
| 
发表于 2025-8-19 12:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-8-19 13:13
发表于 2025-8-19 18:45
