Claude 3.7 Sonnet写特效，品字型色块，围绕中心旋转-CSDN博客

本文链接：https://blog.csdn.net/xutongbao/article/details/146916175

品字型的三个色块，围绕中心旋转，1秒钟旋转一次，让一个色块在品字的上方停留1秒，再旋转第二次，类似于轮播图的效果，生成html代码，样式写在style标签里，以m-开头，色块后期会缓存图片，所以色块本身不能旋转，动画效果使用js代码实现，旋转时色块的移动速度是先快后面

<!DOCTYPE html>
<html>
<head>
  <title>Rotating Blocks in 品 Formation</title>
  <style>
    .m-container {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 50px auto;
    }
    
    .m-block {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
    }
    
    .m-block-1 {
      background-color: #FF5252;
    }
    
    .m-block-2 {
      background-color: #4285F4;
    }
    
    .m-block-3 {
      background-color: #0F9D58;
    }
  </style>
</head>
<body>
  <div class="m-container">
    <div class="m-block m-block-1">1</div>
    <div class="m-block m-block-2">2</div>
    <div class="m-block m-block-3">3</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const container = document.querySelector('.m-container');
      const blocks = document.querySelectorAll('.m-block');
      
      // Center of the container
      const centerX = 150;
      const centerY = 150;
      
      // Radius for the rotation
      const radius = 80;
      
      // Positions in the "品" formation (top, bottom-left, bottom-right)
      const positions = [
        { angle: 0 },     // top
        { angle: 240 },   // bottom-left
        { angle: 120 }    // bottom-right
      ];
      
      // Calculate x, y coordinates from angle and radius
      function getCoordinates(angle) {
        const radians = (angle - 90) * Math.PI / 180;
        return {
          x: centerX + radius * Math.cos(radians) - 40,
          y: centerY + radius * Math.sin(radians) - 40
        };
      }
      
      // Initialize block positions
      function setPositions() {
        blocks.forEach((block, index) => {
          const coords = getCoordinates(positions[index].angle);
          block.style.left = coords.x + 'px';
          block.style.top = coords.y + 'px';
        });
      }
      
      setPositions();
      
      // Rotate blocks one step
      function rotateOneStep() {
        // Store current positions
        const startPositions = [];
        blocks.forEach(block => {
          startPositions.push({
            top: parseFloat(block.style.top),
            left: parseFloat(block.style.left)
          });
        });
        
        // Rotate positions array
        const firstPos = positions.shift();
        positions.push(firstPos);
        
        // Calculate target positions
        const targetPositions = [];
        positions.forEach(pos => {
          const coords = getCoordinates(pos.angle);
          targetPositions.push({
            top: coords.y,
            left: coords.x
          });
        });
        
        // Animate the movement
        const startTime = performance.now();
        const duration = 1000; // 1 second for rotation
        
        function animate(currentTime) {
          const elapsed = currentTime - startTime;
          const progress = Math.min(elapsed / duration, 1);
          
          // Easing function: faster at start, slower at end
          const eased = easeInOutQuint(progress);
          
          // Update positions
          blocks.forEach((block, index) => {
            const newTop = startPositions[index].top + (targetPositions[index].top - startPositions[index].top) * eased;
            const newLeft = startPositions[index].left + (targetPositions[index].left - startPositions[index].left) * eased;
            
            block.style.top = newTop + 'px';
            block.style.left = newLeft + 'px';
          });
          
          if (progress < 1) {
            requestAnimationFrame(animate);
          } else {
            // Pause for 1 second at top position, then rotate again
            setTimeout(rotateOneStep, 1000);
          }
        }
        
        requestAnimationFrame(animate);
      }
      
      // Easing function - faster at the beginning, slower at the end
      function easeInOutQuint(t) {
        return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
      }
      
      // Start the rotation after initial 1-second pause
      setTimeout(rotateOneStep, 1000);
    });
  </script>
</body>
</html>

人工智能学习网站

https://chat.xutongbao.top