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

2025/4/1 6:51:31 来源：https://blog.csdn.net/zxy19931069161/article/details/146564521 浏览: 次关键词：用HTML和CSS生成炫光动画卡片

这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例，使用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>

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