鼠标滑过按钮展开CSS3动画特效

ziblog

已于 2025-06-27 10:43:57 修改

阅读量709

点赞数 9

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2025-06-25 15:11:34 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148870905

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滑过按钮展开CSS3动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}

.container {
text-align: center;
max-width: 800px;
width: 100%;
}

h1 {
margin-bottom: 50px;
color: #2c3e50;
font-size: 2.5rem;
text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 50px;
}

/* 基础按钮样式 */
.btn {
position: relative;
display: inline-block;
padding: 15px 30px;
background: white;
color: #3498db;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
z-index: 1;
}

/* 1. 填充效果按钮 */
.btn-fill {
border: 2px solid #3498db;
}

.btn-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3498db;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}

.btn-fill:hover {
color: white;
}

.btn-fill:hover::before {
transform: scaleX(1);
transform-origin: left;
}

/* 2. 滑动效果按钮 */
.btn-slide {
border: 2px solid #2ecc71;
color: #2ecc71;
}

.btn-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2ecc71;
z-index: -1;
transform: translateY(100%);
transition: transform 0.5s ease;
}

.btn-slide:hover {
color: white;
}

.btn-slide:hover::before {
transform: translateY(0);
}

/* 3. 圆形展开效果按钮 */
.btn-circle {
border: 2px solid #e74c3c;
color: #e74c3c;
}

.btn-circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: #e74c3c;
border-radius: 50%;
z-index: -1;
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease;
}

.btn-circle:hover {
color: white;
}

.btn-circle:hover::before {
width: 300px;
height: 300px;
}

/* 4. 旋转展开效果按钮 */
.btn-rotate {
border: 2px solid #9b59b6;
color: #9b59b6;
}

.btn-rotate::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #9b59b6;
z-index: -1;
transform: rotate(90deg);
transform-origin: bottom left;
transition: transform 0.5s ease;
}

.btn-rotate:hover {
color: white;
}

.btn-rotate:hover::before {
transform: rotate(0);
}

/* 5. 3D翻转效果按钮 */
.btn-flip {
perspective: 1000px;
border: 2px solid #f39c12;
color: #f39c12;
}

.btn-flip span {
display: inline-block;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}

.btn-flip::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f39c12;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transform: rotateX(90deg);
transform-origin: bottom;
transition: transform 0.5s ease;
}

.btn-flip:hover span {
transform: rotateX(-90deg);
}

.btn-flip:hover::before {
transform: rotateX(0);
}

/* 6. 边框动画效果按钮 */
.btn-border {
border: 2px solid #1abc9c;
color: #1abc9c;
transition: color 0.5s ease;
}

.btn-border::before,
.btn-border::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: #1abc9c;
transition: width 0.3s ease;
}

.btn-border::before {
top: 0;
left: 0;
}

.btn-border::after {
bottom: 0;
right: 0;
}

.btn-border:hover::before,
.btn-border:hover::after {
width: 100%;
}

/* 7. 多方向展开效果按钮 */
.btn-multi {
border: 2px solid #e67e22;
color: #e67e22;
}

.btn-multi::before,
.btn-multi::after {
content: '';
position: absolute;
width: 0;
height: 100%;
background: #e67e22;
z-index: -1;
transition: width 0.3s ease;
}

.btn-multi::before {
top: 0;
left: 0;
transition-delay: 0.1s;
}

.btn-multi::after {
top: 0;
right: 0;
}

.btn-multi:hover {
color: white;
}

.btn-multi:hover::before,
.btn-multi:hover::after {
width: 50%;
}

/* 8. 粒子爆炸效果按钮 */
.btn-particle {
border: 2px solid #3498db;
color: #3498db;
overflow: visible;
}

.btn-particle::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #3498db;
z-index: -1;
border-radius: 50px;
transform: scale(0);
transition: transform 0.5s ease;
}

.btn-particle:hover {
color: white;
}

.btn-particle:hover::before {
transform: scale(1);
}

.btn-particle:hover::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
animation: particle 1s ease-out forwards;
}

@keyframes particle {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y));
opacity: 0;
}
}

.link-container {
margin-top: 50px;
}

.more-link {
display: inline-block;
padding: 12px 30px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.more-link:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.6);
}
</style>
</head>
<body>
<div class="container">
<h1>鼠标滑过按钮展开动画特效</h1>

<div class="button-container">
<a href="#" class="btn btn-fill">填充效果</a>
<a href="#" class="btn btn-slide">滑动效果</a>
<a href="#" class="btn btn-circle">圆形展开</a>
<a href="#" class="btn btn-rotate">旋转展开</a>
<a href="#" class="btn btn-flip" data-text="3D翻转">3D翻转</a>
<a href="#" class="btn btn-border">边框动画</a>
<a href="#" class="btn btn-multi">多方向展开</a>
<a href="#" class="btn btn-particle">粒子效果</a>
</div>

</div>