css底座原地旋转动画

CSS底座原地旋转动画

  .base {
  	width: 100px;
  	height: 100px;
  	background-color: red;
  	border-radius: 50%;
  	animation: rotate 2s linear infinite;
  }

  @keyframes rotate {
  	0% {
  		transform: rotate(0deg);
  	}
  	100% {
  		transform: rotate(360deg);
  	}
  }

这是一个简单的CSS动画，使一个圆形底座在原地旋转。

  .base {
  	width: 100px;
  	height: 100px;
  	background-color: red;
  	border-radius: 50%;
  	animation: rotate 2s linear infinite;
  }

在这个代码中，创建了一个名为“.base”的class，用于定义底座的样式属性。设置宽和高都是100像素，背景色为红色， 边框半径为50%，使其成为一个圆。然后，添加了一个动画的关键帧 "@keyframes"，定义了一个名为“rotate”的动画，规定其在2秒钟内以线性的速度无限循环执行.

  @keyframes rotate {
  	0% {
  		transform: rotate(0deg);
  	}
  	100% {
  		transform: rotate(360deg);
  	}
  }

在"@keyframes"规则中，定义了从0%到100%之间的一个全新的动画过程，我们可以用"transform: rotate（xdeg）"属性来控制它的旋转程度。在起始状态下，设置为0度，而在结束状态下，设置为360度。这样，底座就能不停地旋转了！

这是一个非常简单的例子，但背后是无限创意和无限可能性的。在不同的HTML和CSS项目中，很有用的动画技巧。通过学习这些技巧，可以为您的网站增添一些进一步的动态乐趣。