这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例，使用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>这个动画效果包含以下特点：
科技感渐变色旋转边框
悬浮时的放大和发光效果
流动渐变色文字
背景粒子效果
磨砂玻璃质感卡片
流畅的过渡动画
实现原理：
使用伪元素创建旋转的渐变色边框
通过clip-path和overflow:hidden实现边框裁剪
使用background-clip实现文字渐变色
通过关键帧动画实现颜色流动和元素旋转
粒子效果使用绝对定位和动画延迟
使用CSS变换实现流畅的悬浮交互
你可以通过以下方式进一步自定义：
修改渐变色值来改变整体配色
调整animation-duration改变动画速度
添加更多粒子或修改粒子动画路径
修改card的尺寸和形状
添加更多交互效果（如点击效果）
