设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › html+css惊艳呼吸灯效果(附源码!!!)
返回列表 发新帖
查看: 101|回复: 0

html+css惊艳呼吸灯效果(附源码!!!)

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:46:08 | 显示全部楼层 |阅读模式
效果展示
111.gif

源码

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>呼吸灯效果</title>
  8.     <style>
  9.         @property --rotate {
  10.             syntax: "<angle>";
  11.             initial-value: 132deg;
  12.             inherits: false;
  13.         }

  15.         :root {
  16.             --card-height: 65vh;
  17.             --card-width: calc(var(--card-height) / 1.5);
  18.         }


  21.         body {
  22.             min-height: 100vh;
  23.             background: #212534;
  24.             display: flex;
  25.             align-items: center;
  26.             flex-direction: column;
  27.             padding-top: 2rem;
  28.             padding-bottom: 2rem;
  29.             box-sizing: border-box;
  30.         }


  33.         .card {
  34.             background: #191c29;
  35.             width: var(--card-width);
  36.             height: var(--card-height);
  37.             padding: 3px;
  38.             position: relative;
  39.             border-radius: 6px;
  40.             justify-content: center;
  41.             align-items: center;
  42.             text-align: center;
  43.             display: flex;
  44.             font-size: 1.5em;
  45.             color: rgb(88 199 250 / 0%);
  46.             cursor: pointer;
  47.             font-family: cursive;
  48.         }

  50.         .card:hover {
  51.             color: rgb(88 199 250 / 100%);
  52.             transition: color 1s;
  53.         }

  55.         .card:hover:before,
  56.         .card:hover:after {
  57.             animation: none;
  58.             opacity: 0;
  59.         }


  62.         .card::before {
  63.             content: "";
  64.             width: 104%;
  65.             height: 102%;
  66.             border-radius: 8px;
  67.             background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  68.             position: absolute;
  69.             z-index: -1;
  70.             top: -1%;
  71.             left: -2%;
  72.             animation: spin 2.5s linear infinite;
  73.         }

  75.         .card::after {
  76.             position: absolute;
  77.             content: "";
  78.             top: calc(var(--card-height) / 6);
  79.             left: 0;
  80.             right: 0;
  81.             z-index: -1;
  82.             height: 100%;
  83.             width: 100%;
  84.             margin: 0 auto;
  85.             transform: scale(0.8);
  86.             filter: blur(calc(var(--card-height) / 6));
  87.             background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  88.             opacity: 1;
  89.             transition: opacity .5s;
  90.             animation: spin 2.5s linear infinite;
  91.         }

  93.         @keyframes spin {
  94.             0% {
  95.                 --rotate: 0deg;
  96.             }

  98.             100% {
  99.                 --rotate: 360deg;
  100.             }
  101.         }

  103.         a {
  104.             color: #212534;
  105.             text-decoration: none;
  106.             font-family: sans-serif;
  107.             font-weight: bold;
  108.             margin-top: 2rem;
  109.         }
  110.     </style>

  112. </head>

  114. <body>
  115.     <div class="card">
  116.        呼吸灯盒子
  117.     </div>


  120. </body>

  122. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表