我正在嘗試制作一個從右下角-> 頂部中心-> 底部（/）左移動的球。但是，我的影片從右上角-> 底部中心-> 左上角 (/) 移動。
#stage {
height:300px;
border:1px solid #000;
}
#ball {
position:relative;
width:50px;
height:50px;
border-radius:50%;
background-color:red;
animation:ball-move 2s infinite reverse linear 2s,
color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
/* your keyframe styles go here */
0% {
top:50px;
left:50px;
}
50% {
top:calc(100% - 50px);
left:calc(50% - 25px);
}
100% {
top:0;
left:calc(100% - 50px);
}
}<div id="stage">
<div id="ball"></div>
</div>uj5u.com熱心網友回復：
您需要調整關鍵幀。只需要更改“頂級”。
#stage {
height: 300px;
border: 1px solid #000;
}
#ball {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
animation: ball-move 2s infinite reverse linear 2s,
color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
/* your keyframe styles go here */
0% {
top: calc(100% - 50px);
left: 50px;
}
50% {
top: 0px;
left: calc(50% - 25px);
}
100% {
top: calc(100% - 50px);
left: calc(100% - 50px);
}
}<div id="stage">
<div id="ball"></div>
</div>uj5u.com熱心網友回復：
#container{
box-sizing: border-box;
width: 400px;
height: 190px;
margin: 0 auto;
border: 1px solid gray;
background: #fefefe;
}
.ball{
width: 50px;
height: 50px;
background: tomato;
border: 1px solid crimson;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite cubic-bezier(.5,.5,.5,.5) alternate;
}
@keyframes bounce{
0%{
top: calc(100% - 50px);
left: calc(100% - 50px);
}
50%{
left: calc(50% - 50px);
top: 0;
}
100%{
top: calc(100% - 50px);
left: 0;
}
}<body>
<div id="container">
<div class="ball"></div>
</div>
</body>我希望這段代碼能幫助你解決你的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448381.html
上一篇：移動道路背景圖片
下一篇：ReactJS改變背景顏色