css 动画使用

最新推荐文章于 2024-05-06 19:28:55 发布

九霄123

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量93

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/lyxkgc/article/details/126029300

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css 动画
项目使用：
在这里插入图片描述
DOM

  <div class="circle1 animate__rotate360"></div>

CSS

    .circle1 {
      position: absolute;
      width: 230px;
      height: 230px;
      margin: 5px;
      background-image: url(/static/img/index/circle1.png);
    }

.animate__rotate360 {
  animation-duration: 8s;
  animation-name: rotate_360;
}

@keyframes rotate_360 {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform:rotate(-360deg);
  }

  to {
    transform:rotate(0deg);
  }
}