css的运动附带轨迹

CSS是现代web开发的必备技能之一，它不仅可以美化网页，还可以实现一些高级的交互效果。其中一个比较有趣的功能就是运动附带轨迹。通过给一个物体添加轨迹，可以使它在页面上呈现出动态的效果。

运动的关键在于CSS中的@keyframes规则。这个规则可以定义一个动画序列，其中包括物体在运动过程中需要经过的关键帧。在每个关键帧中，可以指定物体的位置和样式。

@keyframes moving {
  from {
  
  transform: translate(0, 0);
}
  to {
  
  transform: translate(500px, 500px);
}
}
 

上面的代码定义了一个叫做moving的动画序列。从from到to，物体沿着x轴移动了500px，沿着y轴也移动了500px。

接下来就是将这个动画序列应用到具体的元素上。要使用animation属性，并指定刚刚定义的动画序列的名字。此外，还要指定动画的时长、重复次数、以及运动的速度曲线等等。

div {
  animation: moving 2s ease-in-out infinite;
}
 

上面的代码将moving动画序列应用到了一个

@keyframes orbit {
  0% {
  
  transform: translate(0, 0);
}
  50% {
  
  transform: translate(200px, 0);
}
  100% {
  
  transform: translate(0, 0);
}
}
div {
  animation: orbit 2s linear infinite;
}