gpt4 book ai didi

CSS 动画 : Curve Arrows

转载 作者:太空宇宙 更新时间:2023-11-03 23:09:30 24 4
gpt4 key购买 nike

是否可以循环动画此图像? enter image description here

我试图通过创建一个相对父级并将每个图像设置为动画(业务解决方案 div、it 解决方案 div、生命周期解决方案 div 和教育解决方案 div 为绝对)。我使用了这段代码,@keyframes rotate { 0%{ 变换:旋转(0度); } 100%{ 变换:旋转(360度); } }它以不同的行为旋转。他们在自己的位置上旋转。

我想以这样的方式制作动画:4 项服务将循环移动。除了外文和内文。提前谢谢你。

最佳答案

这里有一个通用原理的快速演示。

.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>

关于CSS 动画 : Curve Arrows,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33301233/

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