我已經學習 Web 開發大約 2 周了。我剛剛開始影片，我正在嘗試使用關鍵幀完成 CSS 分配，我需要在其中移動元素
- 從視口的左上角
- 到右上角
- 到右下角
- 到左下角
- 并再次回到左上角。
我的元素幾乎到達左下角，但不完全，然后只是切角并以一個奇怪的角度回傳到左上角。最重要的是，我無法在影片期間將元素本身保留在頁面或容器 div 中。
.box{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: black;
top: 0;
left:0;
border-radius: 50%;
position: relative;
animation-name: slideme;
animation-duration: 12s;
animation-iteration-count: infinite;
}
#container{
width: 800px;
height: 800px;
border: 1px solid red;
position: absolute;
}
@keyframes slideme{
0%{
top: 0;
left: 0;
}
25%{
left: 100%;
top: 0;
}
50%{
left: 100%;
top: 100%;
}
75%{
right: 100%;
top: 100%;
}
100%{
left:0 ;
top: 0;
}
}
這是我到目前為止所寫的內容，它讓我完成了 3/4 的作業，但我一生都無法弄清楚為什么最后會有那個小角落。對此的任何幫助或建議將不勝感激。
我嘗試更改 100%{} 屬性的值，還嘗試擴展影片以確保它有足夠的時間播放。
uj5u.com熱心網友回復：
這是因為您使用right的是 75% 關鍵幀而不是left，請查看它的外觀left：
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: black;
top: 0;
left: 0;
border-radius: 50%;
position: relative;
animation-name: slideme;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#container{
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
}
@keyframes slideme {
0% {
top: 0;
left: 0;
}
25% {
top: 0;
left: 100%;
}
50% {
top: 100%;
left: 100%;
}
75% {
top: 100%;
left: 0;
}
100% {
top: 0;
left: 0;
}
}<div id="container">
<div class="box"></div>
</div>我加快了你的影片速度并使盒子變小了，但它應該是相同的代碼！
我剛剛看到您希望在父容器/頁面中包含該元素：您可以使用calc它！一探究竟：
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: black;
top: 0;
left: 0;
border-radius: 50%;
position: relative;
animation-name: slideme;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#container {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
}
@keyframes slideme {
0% {
top: 0;
left: 0;
}
25% {
top: 0;
left: calc(100% - 100px);
}
50% {
top: calc(100% - 100px);
left: calc(100% - 100px);
}
75% {
top: calc(100% - 100px);
left: 0;
}
100% {
top: 0;
left: 0;
}
}<div id="container">
<div class="box"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521017.html
標籤：css动画关键帧
上一篇：如何將一個小部件向前旋轉另一個？