css3动画画方形

CSS3动画是前端工程师们常常使用的技术，能够制作出各种形式的动画效果，比如画方形。下面的代码展示了如何使用CSS3动画画方形：

.square{
      width: 100px;
      height: 100px;
      background-color: green;
      animation: squares 2s infinite;
}
@keyframes squares{
  0%{
        transform: rotate(0deg);
        width: 50px;
  }
  25%{
        transform: rotate(90deg);
        width: 100px;
  }
  50%{
        transform: rotate(180deg);
        width: 50px;
  }
  75%{
        transform: rotate(270deg);
        width: 100px;
  }
  100%{
        transform: rotate(360deg);
        width: 50px;
  }
}
    

首先，我们创建了一个class为.square的CSS样式，设置宽度、高度和背景颜色，接着使用animation属性来定义动画效果。其中，squares为动画名称，2s表示动画执行时间，infinite表示动画无限循环。

接下来，我们在@keyframes中设置了五个状态，从0%到100%分别执行一个旋转动画，每次变换时宽度也会变化。通过改变旋转角度和宽度，就可以画出一个不停旋转的方形。

以上就是使用CSS3动画画一个方形的代码和思路，相信大家都能轻松掌握~

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！