css做简单的动画

CSS动画是网页设计中常用的一种元素，可以使网页更加生动有趣。下面将介绍一些CSS动画的简单实现方法。

  .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: move 2s infinite;
  }
  @keyframes move {
    0% {
          left: 0;
    }
    50% {
          left: 50%;
    }
    100% {
          left: 0;
    }
  }

1.移动动画

  .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        transition: all 1s;
  }
  .box:hover{
        transform: translateX(50px);
  }

2.放大动画

  .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        transition: all 1s;
  }
  .box:hover{
        transform: scale(1.5);
  }

3.旋转动画

  .box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        transition: all 1s;
  }
  .box:hover{
        transform: rotate(360deg);
  }
    

以上是CSS动画的一些简单实现方法，可以根据需要将其进行组合使用，创造出更加丰富多样的动画效果。

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