✨ 带有玻璃变形效果的发光迪斯科灯泡动画！ ✨ 代码 HTML CSS 和 JAVASCRIPT-js教程-PHP中文网

✨ 带有玻璃变形效果的发光迪斯科灯泡动画！ ✨ 代码 HTML CSS 和 JAVASCRIPT

Patricia Arquette

发布： 2024-12-24 17:25:13

原创

403 人浏览过

✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code HTML CSS AND JAVASCRIPT

<html lang="zh-cn">
<头>
  
  
  <title>迪斯科灯泡动画</title>
  
    身体 {
      保证金：0；
      高度：100vh；
      显示：柔性；
      调整内容：居中；
      对齐项目：居中；
      背景：线性渐变（45deg，#000000，#111111）；
      字体系列：Arial、无衬线字体；
    }

    。容器 {
      显示：柔性；
      间隙：200px；
    }

    。墙 {
      显示：柔性；
      弹性方向：列；
      对齐内容：空间之间；
      高度：300px；
      内边距：15px；
      边框半径：10px；
      背景：rgba(96,95,95,0.281);
      背景过滤器：模糊（10px）；
      盒子阴影：0 4px 10px rgba(0, 0, 0, 0.5);
    }

    。电灯泡 {
      宽度：60 像素；
      高度：60 像素；
      背景：rgba(255, 255, 255, 0.1);
      边框: 2px 实心 rgba(255, 255, 255, 0.2);
      边界半径：50%；
      背景过滤器：模糊（10px）；
      框阴影: 0 0 5px rgba(255, 255, 255, 0.2), 插图 0 0 10px rgba(255, 255, 255, 0.1);
      过渡：box-shadow 0.3s，background-color 0.3s；
    }

    .bulb.glow {
      动画：迪斯科0.2s无限交替；
    }

    @keyframes迪斯科{
      0% {
        背景颜色: rgba(255, 0, 128, 0.8);
        盒子阴影: 0 0 40px 40px rgba(255, 0, 128, 0.8);
      }
      25% {
        背景颜色: rgba(0, 255, 128, 0.8);
        盒子阴影: 0 0 30px 10px rgba(0, 255, 128, 0.8);
      }
      50% {
        背景颜色: rgba(0, 128, 255, 0.8);
        框阴影: 0 0 30px 10px rgba(0, 128, 255, 0.8);
      }
      75% {
        背景颜色: rgba(255, 255, 0, 0.8);
        盒子阴影: 0 0 30px 10px rgba(255, 255, 0, 0.8);
      }
      100% {
        背景颜色: rgba(255, 128, 0, 0.8);
        盒子阴影: 0 0 30px 10px rgba(255, 128, 0, 0.8);
      }
    }

    .开始按钮{
      位置：绝对；
      底部：50 像素；
      内边距：15 像素 30 像素；
      背景：#ff5722；
      颜色: 白色;
      边框：无；
      边框半径：10px；
      光标：指针；
      字体大小：18px；
      字体粗细：粗体；
      盒子阴影：0 4px 8px rgba(0, 0, 0, 0.5);
      过渡：背景0.3s；
    }

    .开始按钮：悬停{
      背景：#ff784e；
    }
  </风格>
</头>

  <div>




          </div>

登录后复制

以上是✨ 带有玻璃变形效果的发光迪斯科灯泡动画！ ✨ 代码 HTML CSS 和 JAVASCRIPT的详细内容。更多信息请关注PHP中文网其他相关文章！