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

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

一、效果

二、实现

代码如下:

html 复制代码
<!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>

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

  1. 科技感渐变色旋转边框

  2. 悬浮时的放大和发光效果

  3. 流动渐变色文字

  4. 背景粒子效果

  5. 磨砂玻璃质感卡片

  6. 流畅的过渡动画

实现原理:

  1. 使用伪元素创建旋转的渐变色边框

  2. 通过clip-path和overflow:hidden实现边框裁剪

  3. 使用background-clip实现文字渐变色

  4. 通过关键帧动画实现颜色流动和元素旋转

  5. 粒子效果使用绝对定位和动画延迟

  6. 使用CSS变换实现流畅的悬浮交互

你可以通过以下方式进一步自定义:

  1. 修改渐变色值来改变整体配色

  2. 调整animation-duration改变动画速度

  3. 添加更多粒子或修改粒子动画路径

  4. 修改card的尺寸和形状

  5. 添加更多交互效果(如点击效果)


相关推荐
WebInfra7 分钟前
Rspack 1.3 发布:内存大幅优化,生态加速发展
前端·javascript·github
ak啊11 分钟前
Webpack 构建阶段:模块解析流程
前端·webpack·源码
学习OK呀21 分钟前
后端上手学习react基础知识
前端
星火飞码iFlyCode21 分钟前
大模型提效之服务端日常开发
前端
zoahxmy092922 分钟前
Canvas 实现单指拖动、双指拖动和双指缩放
前端·javascript
花花鱼23 分钟前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
Riesenzahn25 分钟前
CSS的伪类和伪对象有什么不同?
前端·javascript
Riesenzahn25 分钟前
请描述下null和undefined的区别是什么?这两者分别运用在什么场景?
前端·javascript
代码小学僧25 分钟前
一行代码顶二十行代码! 🔧 修复 React 聊天室滚动加载问题 Bugfix 解决方法分享
前端·css·react.js
__不想说话__25 分钟前
前端视角下的AI应用:技术融合与工程实践指南
前端·javascript·aigc