用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>

這個動畫效果包含以下特點：

科技感漸變色旋轉邊框
懸浮時的放大和發光效果
流動漸變色文字
背景粒子效果
磨砂玻璃質感卡片
流暢的過渡動畫

實現原理：

使用偽元素創建旋轉的漸變色邊框
通過clip-path和overflow:hidden實現邊框裁剪
使用background-clip實現文字漸變色
通過關鍵幀動畫實現顏色流動和元素旋轉
粒子效果使用絕對定位和動畫延遲
使用CSS變換實現流暢的懸浮交互

你可以通過以下方式進一步自定義：

修改漸變色值來改變整體配色
調整animation-duration改變動畫速度
添加更多粒子或修改粒子動畫路徑
修改card的尺寸和形狀
添加更多交互效果（如點擊效果）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/74772.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74772.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/74772.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！