纯css实现炫酷卡片动画效果使用纯css实现炫酷卡片动画效果，方便在门户网站一些特殊动画效果中使用这个代码实现了一个炫

使用纯css实现炫酷卡片动画效果，方便在门户网站一些特殊动画效果中使用

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>炫酷卡片动画效果</title>
		<style>
			.card {
				width: 200px;
				height: 280px;
				background: #07182E;
				position: relative;
				display: flex;
				place-content: center;
				place-items: center;
				overflow: hidden;
				border-radius: 20px;
			}

			.card h3 {
				z-index: 1;
				color: white;
				font-size: 1em;
			}

			.card::before {
				content: '';
				position: absolute;
				width: 100px;
				background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
				height: 120%;
				animation: rotateDong 3s linear infinite;
				transition: all 0.2s linear;
			}

			@keyframes rotateDong {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			.card::after {
				content: '';
				position: absolute;
				background: #000;
				inset: 5px;
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div class="card">
			<h3>卡片动画</h3>
		</div>
	</body>

</html>

这个代码实现了一个炫酷的卡片动画效果。下面是对这个实现思路的详细说明：

代码结构

HTML结构：
- 使用一个<div>元素作为卡片容器，内部包含一个标题<h3>。
CSS样式：
- .card 元素用于设置卡片的外观特征，包括宽度、高度、背景色、边框圆角和中心对齐。
- 为卡片添加了::before伪元素，作为动态元素使用，产生旋转的背景效果。
- ::after伪元素用于创建一个内边距效果，增强视觉层次感。

动画效果

旋转动画：
- @keyframes rotateDong定义了动画，从0deg旋转到360deg，使得::before伪元素循环旋转。
- 使用animation属性将这个动画应用到::before伪元素，并设置动画持续时间为3秒，采用线性无限循环。

视觉表现

渐变效果：
- ::before伪元素背景使用线性渐变，产生从蓝色到粉色的颜色过渡，增加了吸引力。
层次感：
- 通过::after伪元素的黑色背景和内边距，卡片看起来更加立体，给人一种浮雕的感觉。

总结

这个实现通过CSS伪元素和动画结合，创建了一种吸引注意的卡片效果。可以进一步扩展，比如加入鼠标悬停时的交互效果，以增加用户体验。例如，可以在鼠标悬停时改变背景色或放大卡片。这样的交互效果可以使卡片看起来更加生动和有趣。