纯HTML+CSS实现一个duang duang duang的弹簧效果

最新推荐文章于 2024-08-30 13:35:10 发布

原创最新推荐文章于 2024-08-30 13:35:10 发布 · 508 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文详细展示了如何使用原生HTML和CSS创建一个弹簧效果，通过`transform`,`rotateX`,`animation`,和`@keyframes`等技术，实现了弹簧的弹跳和颜色渐变，达到视觉上的duangduangduang效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天使用原生的html和css实现一个duang duang duang的弹簧效果,如下图:

成龙duangduangduang表情包

好了,不开玩笑,完整的效果图:

弹簧案例效果图

源码如下:

<!--
 * @Author: wangzhiyu <w19165802736@163.com>
 * @version: 1.0.0
 * @Date: 2024-02-21 10:56:42
 * @LastEditTime: 2024-02-21 17:56:16
 * @Descripttion: CSS 弹簧效果
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS 弹簧效果</title>
  <style>
    body {
      background-color: #000;
    }

    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 100%;
      height: 100vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .item {
      position: absolute;
      background-color: transparent;
      width: calc(var(--i) * 20px);
      aspect-ratio: 1/1;
      border: 10px solid rgb(0, 200, 255);
      /* 边框圆角半径为50%，使得边框呈现圆形 */
      border-radius: 50%;
      /* 沿X轴旋转70度(实现3D视角) */
      transform: rotateX(70deg);
      /* 应用名为move的动画，持续3秒，缓动效果为ease-in-out，延迟时间根据自定义变量--i计算，无限循环播放 */
      animation: move 3s ease-in-out calc(var(--i) * 0.08s) infinite;
      /* 设置内阴影和外阴影效果 */
      box-shadow: 0px 0px 15px rgb(124 124 124) inset 0px 0px 15px rgb(124, 124, 124);

      /* 色相旋转180度，改变颜色 */
      filter: hue-rotate(180deg);
    }

    @keyframes move {

      0%,
      100% {
        /* 在动画的起始和结束时刻，沿X轴旋转70度，不进行垂直位移 */
        transform: rotateX(70deg) translateY(0px);
      }

      50% {
        /* 在动画中间时刻，沿X轴旋转70度，同时垂直上移40vw的距离（视口宽度的百分比） */
        transform: rotateX(70deg) translateY(-40vw);
        /* 色相旋转0度，改变颜色 */
        filter: hue-rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 下面的item表示弹簧的数量 -->
    <div class="item" style="--i: 0"></div>
    <div class="item" style="--i: 1"></div>
    <div class="item" style="--i: 2"></div>
    <div class="item" style="--i: 3"></div>
    <div class="item" style="--i: 4"></div>
    <div class="item" style="--i: 5"></div>
    <div class="item" style="--i: 6"></div>
    <div class="item" style="--i: 7"></div>
    <div class="item" style="--i: 8"></div>
    <div class="item" style="--i: 9"></div>
    <div class="item" style="--i: 10"></div>
    <div class="item" style="--i: 11"></div>
    <div class="item" style="--i: 12"></div>
    <div class="item" style="--i: 13"></div>
    <div class="item" style="--i: 14"></div>
    <div class="item" style="--i: 15"></div>
    <div class="item" style="--i: 16"></div>
    <div class="item" style="--i: 17"></div>
    <div class="item" style="--i: 18"></div>
    <div class="item" style="--i: 19"></div>
    <div class="item" style="--i: 20"></div>
    <div class="item" style="--i: 21"></div>
    <div class="item" style="--i: 22"></div>
    <div class="item" style="--i: 23"></div>
    <div class="item" style="--i: 24"></div>
    <div class="item" style="--i: 25"></div>
    <div class="item" style="--i: 26"></div>
    <div class="item" style="--i: 27"></div>
    <div class="item" style="--i: 28"></div>
    <div class="item" style="--i: 29"></div>
    <div class="item" style="--i: 30"></div>
  </div>
</body>

</html>