【分享】CSS 动画特效代码

4月

![]()

由5个圆形元素组成的3D旋转加载动画。每个圆形元素都在自己的轴上不断缩放，创建出旋转的视觉效果

代码分享：

html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .loading-container {
    perspective: 500px;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto;
  }
 
  .loading {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotate 2s infinite linear;
  }
 
  .loading div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #3498db;
    border-radius: 50%;
    opacity: 0.7;
  }
 
  .loading div:nth-child(1) {
    transform: translateZ(50px);
    animation: bounce 2s infinite linear;
  }
 
  .loading div:nth-child(2) {
    background: #9b59b6;
    transform: translateZ(100px) rotateX(90deg);
    animation: bounce 2s infinite -1s linear;
  }
 
  .loading div:nth-child(3) {
    background: #f39c12;
    transform: translateZ(150px) rotateX(180deg);
    animation: bounce 2s infinite -2s linear;
  }
 
  .loading div:nth-child(4) {
    background: #1abc9c;
    transform: translateZ(100px) rotateX(270deg);
    animation: bounce 2s infinite -3s linear;
  }
 
  .loading div:nth-child(5) {
    background: #e74c3c;
    transform: translateZ(50px) rotateX(360deg);
    animation: bounce 2s infinite -4s linear;
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
 
  @keyframes bounce {
    0%, 100% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1);
    }
  }
</style>
</head>
<body>
<div class="loading-container">
  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</body>
</html>

声明：本文由千鹤喵绫（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢