gpt4 book ai didi

javascript - 使用css中的关键帧沿方形方向移动圆圈

转载 作者:行者123 更新时间:2023-12-05 05:59:28 24 4
gpt4 key购买 nike

<分区>

我的圆圈没有使用关键帧提前 css 沿正方形方向移动。请告诉我为什么它没有朝正确的方向移动。我们是否在父卡中使用相对?

请告诉我是否有任何有用的观点可以更好地理解这个概念。

.card{
height: 400px;
width: 400px;
border: 2px dashed black;
margin: 20px 20%;
top: 0;
bottom: 0;
position: absolute;
}
.box
{
height: 100px;
width: 100px;
border: 2px solid black;
border-radius : 50%;
background-color: red;
animation-name: slide;
animation-duration: 4s;
animation-iteration-count: infinite;
top: 0;
left: 0;
position: relative;
}
@keyframes slide{
0%
{
top: 0;
left: 0;
}
25%{
top: 0;
right: 90%;
}
50%{
right: 0;
bottom: 75%;
}
75%{
left: 75%;
bottom: 0;
}
100%{
left: 0;
top: 75%;
}
}
  <div class="card">
<div class="box"></div>
<div>

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