css动画：div加载旋转，hover放大效果

最新推荐文章于 2025-03-03 08:00:00 发布

前端小云儿

最新推荐文章于 2025-03-03 08:00:00 发布

阅读量212

点赞数 3

分类专栏： css基础-js基础硬核-知识体系文章标签： 1024程序员节 react.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/143200602

版权

css基础-js基础硬核-知识体系专栏收录该内容

49 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
<body>
  <h3 class="h-style">css动画：div加载旋转，hover放大效果</h3>
  <div class="test">
    <div class="transition-box">
      哇塞，太酷啦
    </div>
    <div class="transition-box">
      哇塞，太酷啦
    </div> <div class="transition-box">
      哇塞，太酷啦
    </div> <div class="transition-box">
      哇塞，太酷啦
    </div> <div class="transition-box">
      哇塞，太酷啦
    </div> <div class="transition-box">
      哇塞，太酷啦
    </div>
  </div>
  <script type="text/script">
  </script>
  <style>
.test{
  display: flex;
  transform-style: preserve-3d;
}
.transition-box{
  margin-right: 20px;
  width: 200px;
  height: 200px;
  background-color: #ede2e2;
  transition:  all 1s;
  animation: changeDeg 1s;
}

.transition-box:hover{
  transform:scale(1.1); 
}
@keyframes changeDeg {
    0% {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
      transform: rotate3d(0, 1, 0, 360deg);
    }
}
  </style>
</body>

</html>