Html 如何使用 CSS 修复球动画

#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>

#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>

Html相关问答推荐

后续使用收件箱从网页表中提取值

如何防止下拉菜单内的Bootstrap列表行包装？

单表单和多个提交(具有多个值)

Angular 滑块问题

如何让QML`Text`元素内的链接在悬停时显示鼠标指针？

仅在加载视频时显示描述(<；Video>；标签)

滚动两个不同高度的DIV;一个等待另一个

如何保持嵌套进度条的背景色？

在Firefox中，使用写入模式：Vertical-LR时，不随内容扩展的css弹性项

将文本保持在平行四边形内并遵循形状

MUI 日期 Select 器要包含的日期

如何在悬停时使矩形按钮上的边框变圆

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

第 117 行的块标记无效：endblock，应为empty或endfor.您是否忘记注册或加载此标签？

为什么每当我调整图片大小时它都会使我的其他元素移动

为什么使用 Css 只能看到 1 列而不是 3 列？

如何从另一个 ng-template 获取输入值

如何在Bootstrap卡片底部添加波浪形状

如何使用 CSS 制作蜂窝状网格？

如何将图像高度设置为等于文本高度？