CSS按钮动画特效

原创已于 2025-06-27 13:36:14 修改 · 874 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-04 14:28:14 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS按钮动画特效</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
flex-direction: column;
}

h1 {
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin-bottom: 40px;
}

.button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 800px;
}

/* 基础按钮样式 */
.btn {
position: relative;
display: inline-block;
padding: 15px 30px;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
font-size: 16px;
overflow: hidden;
transition: 0.5s;
border: none;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 按钮1 - 流光效果 */
.btn-1 {
background: #ff3c7e;
}

.btn-1:hover {
background: #ff3c7e;
color: #fff;
box-shadow: 0 0 10px #ff3c7e, 0 0 40px #ff3c7e, 0 0 80px #ff3c7e;
}

.btn-1 span {
position: absolute;
display: block;
}

.btn-1 span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #fff);
animation: btn-anim1 2s linear infinite;
}

@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}

/* 按钮2 - 3D按压效果 */
.btn-2 {
background: #4CAF50;
transform-style: preserve-3d;
perspective: 1000px;
}

.btn-2::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #45a049;
border-radius: 5px;
transform: translateZ(-5px);
transition: all 0.3s ease;
}

.btn-2:hover::before {
transform: translateZ(-2px);
}

.btn-2:active {
transform: translateY(5px);
}

.btn-2:active::before {
transform: translateZ(0);
}

/* 按钮3 - 气泡效果 */
.btn-3 {
background: #2196F3;
overflow: hidden;
}

.btn-3:hover {
background: #0b7dda;
}

.btn-3::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10.01%) no-repeat 50%;
transform: scale(10,10);
opacity: 0;
transition: transform .5s, opacity 1s;
}

.btn-3:active::after {
transform: scale(0,0);
opacity: 0.3;
transition: 0s;
}

/* 按钮4 - 边框动画 */
.btn-4 {
background: transparent;
color: #fff;
border: 2px solid #fff;
}

.btn-4:hover {
background: #fff;
color: #764ba2;
box-shadow: 0 0 20px rgba(255,255,255,0.6);
}

.btn-4::before, .btn-4::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #fff;
transition: all 0.5s ease;
}

.btn-4::before {
top: -10px;
left: -10px;
border-right: none;
border-bottom: none;
}

.btn-4::after {
bottom: -10px;
right: -10px;
border-left: none;
border-top: none;
}

.btn-4:hover::before, .btn-4:hover::after {
width: calc(100% + 18px);
height: calc(100% + 18px);
}

/* 浮动动画元素 */
.floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}

.floating-element {
position: absolute;
background: rgba(255,255,255,0.1);
border-radius: 50%;
animation: float 15s infinite linear;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-1000px) rotate(720deg);
}
}

/* 响应式设计 */
@media (max-width: 600px) {
.button-container {
flex-direction: column;
gap: 20px;
}

.btn {
padding: 12px 24px;
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>CSS按钮动画特效</h1>

<div class="button-container">
<button class="btn btn-1">
<span></span>
流光按钮
</button>

<button class="btn btn-2">
3D按压按钮
</button>

<button class="btn btn-3">
气泡按钮
</button>


</div>

<div class="floating-elements">

<div class="floating-element" style="width: 100px; height: 100px; top: 20%; left: 10%; animation-delay: 0s;"></div>
<div class="floating-element" style="width: 150px; height: 150px; top: 70%; left: 80%; animation-delay: 2s;"></div>
<div class="floating-element" style="width: 60px; height: 60px; top: 40%; left: 50%; animation-delay: 4s;"></div>
<div class="floating-element" style="width: 120px; height: 120px; top: 80%; left: 30%; animation-delay: 6s;"></div>
<div class="floating-element" style="width: 80px; height: 80px; top: 10%; left: 70%; animation-delay: 8s;"></div>
</div>

<script>
// 添加更多浮动元素
document.addEventListener('DOMContentLoaded', function() {
const floatingContainer = document.querySelector('.floating-elements');

for (let i = 0; i < 10; i++) {
const size = Math.random() * 100 + 50;
const posX = Math.random() * 100;
const posY = Math.random() * 100;
const delay = Math.random() * 10;
const duration = Math.random() * 10 + 10;

const element = document.createElement('div');
element.className = 'floating-element';
element.style.width = `${size}px`;
element.style.height = `${size}px`;
element.style.top = `${posY}%`;
element.style.left = `${posX}%`;
element.style.animationDelay = `${delay}s`;
element.style.animationDuration = `${duration}s`;

floatingContainer.appendChild(element);
}
});
</script>
</body>
</html>