html+css实现环绕倒影加载特效

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-14 07:53:48

　　html+css实现环绕倒影加载特效

Sure, here is an example of how to create a loading spinner with a reflection effect using HTML and CSS:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Spinner with Reflection</title>
  <style>
    /* Basic styles */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    /* Spinner container */
    .spinner-container {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }

    /* Spinner */
    .spinner {
      width: 50px;
      height: 50px;
      border: 10px solid #333;
      border-radius: 50%;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* Reflection */
    .reflection {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      transform: scaleY(-1);
      opacity: 0.5;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    }
  </style>
</head>
<body>
  <div class="spinner-container">
    <div class="spinner"></div>
    <div class="reflection"></div>
  </div>
</body>
</html>

Explanation:

HTML Structure:
- The HTML creates a div container with the class spinner-container to hold the spinner and its reflection.
- Inside the container, a div with the class spinner is created for the actual loading animation.
- Another div with the class reflection is added below the spinner to create the reflection effect.
CSS Styles:
- Basic styles are set for the body to center the spinner vertically and horizontally.
- The .spinner-container is positioned relative to allow positioning of the reflection.
- The .spinner is styled with a border, border-radius, and animation to create the rotating circle effect.
- The .reflection is positioned absolutely at the bottom, scaled vertically to create the reflection, and given a semi-transparent background with a gradient.

Key CSS Properties:

position: relative/absolute: Used to position the spinner and reflection relative to each other.
width, height, border, border-radius: Style the appearance of the spinner circle.
animation: spin 2s linear infinite: Defines the spinning animation.
transform: scaleY(-1): Flips the reflection vertically.
opacity: 0.5, background: linear-gradient(): Creates the semi-transparent reflection effect.

Customizations:

You can customize the colors, sizes, and animation speed of the spinner using CSS.
The reflection effect can be further enhanced with additional CSS properties like blur or filter.
JavaScript can be used to dynamically control the loading state and show/hide the spinner.