15种CSS3鼠标悬停图片动画特效_css3鼠标悬停图片特效-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15种CSS3鼠标悬停图片动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
padding: 20px;
}

h1 {
text-align: center;
margin: 30px 0;
color: #333;
}

.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}

.effect-box {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
height: 200px;
}

.effect-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}

.effect-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
transform: translateY(100%);
transition: all 0.3s ease;
}

/* 效果1: 放大 */
.effect-1:hover img {
transform: scale(1.1);
}

/* 效果2: 旋转 */
.effect-2:hover img {
transform: rotate(15deg) scale(1.1);
}

/* 效果3: 黑白变彩色 */
.effect-3 img {
filter: grayscale(100%);
}
.effect-3:hover img {
filter: grayscale(0);
}

/* 效果4: 模糊变清晰 */
.effect-4 img {
filter: blur(3px);
}
.effect-4:hover img {
filter: blur(0);
}

/* 效果5: 倾斜 */
.effect-5:hover img {
transform: skewX(-15deg);
}

/* 效果6: 3D翻转 */
.effect-6 {
perspective: 1000px;
}
.effect-6 img {
transform-style: preserve-3d;
}
.effect-6:hover img {
transform: rotateY(180deg);
}

/* 效果7: 标题滑入 */
.effect-7:hover .effect-title {
transform: translateY(0);
}

/* 效果8: 边框动画 */
.effect-8 {
border: 3px solid transparent;
transition: all 0.3s ease;
}
.effect-8:hover {
border-color: #ff6b6b;
}

/* 效果9: 发光效果 */
.effect-9:hover img {
box-shadow: 0 0 20px #4ecdc4;
}

/* 效果10: 透明度变化 */
.effect-10:hover img {
opacity: 0.7;
}

/* 效果11: 圆形遮罩 */
.effect-11 {
clip-path: circle(75% at 50% 50%);
transition: all 0.5s ease;
}
.effect-11:hover {
clip-path: circle(40% at 50% 50%);
}

/* 效果12: 图片抖动 */
.effect-12:hover img {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}

/* 效果13: 图片弹跳 */
.effect-13:hover img {
animation: bounce 0.5s;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* 效果14: 图片翻转 */
.effect-14:hover img {
transform: scaleX(-1);
}

/* 效果15: 复合效果 */
.effect-15:hover img {
transform: scale(1.1) rotate(5deg);
filter: brightness(1.2) contrast(1.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.footer {
text-align: center;
margin: 50px 0 20px;
color: #666;
}

.footer a {
color: #ff6b6b;
text-decoration: none;
}
</style>
</head>
<body>
<h1>15种CSS3鼠标悬停图片动画特效</h1>

<div class="container">

<div class="effect-box effect-1">
<img src="https://picsum.photos/400/300?random=1" alt="效果1">
<div class="effect-title">放大效果</div>
</div>


<div class="effect-box effect-2">
<img src="https://picsum.photos/400/300?random=2" alt="效果2">
<div class="effect-title">旋转效果</div>
</div>


<div class="effect-box effect-3">
<img src="https://picsum.photos/400/300?random=3" alt="效果3">
<div class="effect-title">黑白变彩色</div>
</div>


<div class="effect-box effect-4">
<img src="https://picsum.photos/400/300?random=4" alt="效果4">
<div class="effect-title">模糊变清晰</div>
</div>


<div class="effect-box effect-5">
<img src="https://picsum.photos/400/300?random=5" alt="效果5">
<div class="effect-title">倾斜效果</div>
</div>


<div class="effect-box effect-6">
<img src="https://picsum.photos/400/300?random=6" alt="效果6">
<div class="effect-title">3D翻转</div>
</div>


<div class="effect-box effect-7">
<img src="https://picsum.photos/400/300?random=7" alt="效果7">
<div class="effect-title">标题滑入效果</div>
</div>


<div class="effect-box effect-8">
<img src="https://picsum.photos/400/300?random=8" alt="效果8">
<div class="effect-title">边框动画</div>
</div>


<div class="effect-box effect-9">
<img src="https://picsum.photos/400/300?random=9" alt="效果9">
<div class="effect-title">发光效果</div>
</div>


<div class="effect-box effect-10">
<img src="https://picsum.photos/400/300?random=10" alt="效果10">
<div class="effect-title">透明度变化</div>
</div>


<div class="effect-box effect-11">
<img src="https://picsum.photos/400/300?random=11" alt="效果11">
<div class="effect-title">圆形遮罩</div>
</div>


<div class="effect-box effect-12">
<img src="https://picsum.photos/400/300?random=12" alt="效果12">
<div class="effect-title">图片抖动</div>
</div>


<div class="effect-box effect-13">
<img src="https://picsum.photos/400/300?random=13" alt="效果13">
<div class="effect-title">图片弹跳</div>
</div>


<div class="effect-box effect-14">
<img src="https://picsum.photos/400/300?random=14" alt="效果14">
<div class="effect-title">图片翻转</div>
</div>


<div class="effect-box effect-15">
<img src="https://picsum.photos/400/300?random=15" alt="效果15">
<div class="effect-title">复合效果</div>
</div>
</div>


</body>
</html>