gpt4 book ai didi

css - 展开具有不同形状和大小的三 Angular 形?

转载 作者:行者123 更新时间:2023-11-28 01:10:19 26 4
gpt4 key购买 nike

我正在尝试使用 CSS3 创建展开动画。

基本上,我试图依次展开 3 个三 Angular 形,这些三 Angular 形的大小和形状各不相同,但它们都构成了一个图像。

我不确定这是否可行,但到目前为止我已经想到了:

http://jsfiddle.net/wvm15yL4/27/

这是我的代码:

@keyframes flip {
0% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 0;}
0.1% { transform: rotate3d( 0.5, 0.866, 0, 90deg);
opacity: 1;}
14% { transform: rotate3d( 0.5, 0.866, 0, 0deg); }
50% { transform: rotate3d(-0.5, 0.866, 0, 0deg); }
63.99% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 1;}
64%, 100% { transform: rotate3d(-0.5, 0.866, 0, -90deg);
opacity: 0}
}

.folding-hex {
height: 69.28px;
width: 80px;
position: relative;
margin: 0 auto;
transform-origin: 0 0;
transform: translateX(40px) rotate(30deg); }

.rotator {
transform-origin: 20px 37.64px;

}
.rotator:nth-child(1) {
transform: rotate(0deg);
}
.rotator:nth-child(2) {
transform: rotate(60deg);
}
.rotator:nth-child(3) {
transform: rotate(120deg);
}
.rotator:nth-child(4) {
transform: rotate(180deg);
}
.rotator:nth-child(5) {
transform: rotate(240deg);
}
.rotator:nth-child(6) {
transform: rotate(300deg);
}

.triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 34.64px 20px 0;
transform-origin: 20px 37.64px;
border-color: #E50C4E transparent;
animation: flip 3s linear infinite;
}

.rotator:nth-child(2) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.5s;
}
.rotator:nth-child(3) .triangle {
border-color: #b5093d transparent;
animation-delay: -2.0s;
}
.rotator:nth-child(4) .triangle {
animation-delay: -1.5s;
}

.rotator:nth-child(5) .triangle {
border-color: #f8799f transparent;
animation-delay: -1.0s;
}
.rotator:nth-child(6) .triangle {
border-color: #f8799f transparent;
animation-delay: -0.5s;
}

如您所见,它目前有动画效果但并未真正展开三 Angular 形。

有人可以就此事提出建议吗?

提前致谢。

编辑:

基本上,尝试像这样展开三 Angular 形:

http://jsfiddle.net/wvm15yL4/28/

最佳答案

您或许可以尝试使用 SVG 来定义三 Angular 形并使用更少的代码,然后根据需要调整变换属性。

这是一个简化的例子,悬停展开:

.unfold {
margin: 150px;
position: relative;
width:100px;
}
.unfold svg {
position:absolute;
bottom:0;
stroke:blue;
stroke-width:2px;
fill:transparent;
transform-origin:bottom;
transform:skewY(-10deg);
transition:1s all;
}
.unfold svg:last-child {
transform:skewY(-10deg) rotateX(45deg);
}
.unfold:hover svg:first-child {
transform-origin:bottom;
transform:skewY(-10deg) rotateX(-140deg);
}
<div class="unfold">
<svg viewBox="0 0 100 100" ><polygon points="2 2,2 98,98 98" /></svg>
<svg viewBox="0 0 100 100" ><polygon points="98 2,2 98,98 98" /></svg>
</div>

关于css - 展开具有不同形状和大小的三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52135647/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com