用HTML和CSS生成炫光动画卡片

news2025/3/31 17:10:03

这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例，使用HTML和CSS实现。

一、效果

二、实现

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫光动画卡片</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0a0a0a;
            overflow: hidden;
        }

        .card {
            width: 300px;
            height: 400px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.5s;
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        }

        .card::before {
            content: '';
            position: absolute;
            width: 150px;
            height: 140%;
            background: linear-gradient(#00fffc, #ff00ff);
            animation: rotate 4s linear infinite;
        }

        .card::after {
            content: '';
            position: absolute;
            inset: 4px;
            background: #0a0a0a;
            border-radius: 12px;
        }

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

        .content {
            position: relative;
            z-index: 1;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .glowing-text {
            font-size: 2em;
            font-weight: bold;
            background: linear-gradient(45deg, #ff00ff, #00fffc, #ffeb3b);
            -webkit-background-clip: text;
            color: transparent;
            animation: gradient 3s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .particles span {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            animation: particle 2s linear infinite;
            opacity: 0;
        }

        @keyframes particle {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(50px);
                opacity: 0;
            }
        }

        /* 生成随机粒子位置 */
        .particles span:nth-child(1) { left: 20%; animation-delay: 0s; }
        .particles span:nth-child(2) { left: 50%; animation-delay: 0.5s; }
        .particles span:nth-child(3) { left: 70%; animation-delay: 1s; }
        /* 可以添加更多粒子... */
    </style>
</head>
<body>
    <div class="card">
        <div class="particles">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="content">
            <div class="glowing-text">CSS MAGIC</div>
            <p>Hover me!</p>
        </div>
    </div>
</body>
</html>

这个动画效果包含以下特点：