在本文中，我们将深入探讨如何使用纯CSS3实现一个鼠标悬停时图片放大，同时两边模糊的视觉效果。这个效果可以增强用户交互性，为网站或应用增添动态美感。我们将详细解析实现这一效果的关键CSS3属性和技术。
我们要创建一个包含图片的基本HTML结构：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>纯CSS3鼠标悬停放大图片两边模糊效果</title>
<style>
/* 在这里添加CSS3样式 */
</style>
</head>
<body>
<div class="image-container">
<img src="你的图片URL" alt="示例图片">
</div>
</body>
</html>
```
接下来，我们将使用CSS3来定义`image-container`类和`img`元素的样式。关键在于使用`transition`属性实现平滑过渡，`transform`属性来放大图片，以及`filter`属性来实现模糊效果：
```css
.image-container {
position: relative;
width: 100%;
max-width: 500px; /* 根据需要调整最大宽度 */
}
.image-container img {
width: 100%;
height: auto;
transition: transform 0.3s ease; /* 设置平滑过渡 */
}
/* 鼠标悬停时的样式 */
.image-container:hover img {
transform: scale(1.1); /* 图片放大10% */
filter: blur(10px); /* 两边模糊效果，调整blur值以改变模糊程度 */
}
/* 创建遮罩层，用于遮住模糊部分 */
.image-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
z-index: 1;
}
/* 鼠标悬停时，改变遮罩层位置 */
.image-container:hover:before {
left: 50%;
}
```
这段CSS代码首先设置了一个相对定位的容器`image-container`，并为其内的`img`元素设置了宽度100%以适应容器。`transition`属性用于在图片大小变化时产生平滑过渡效果。当鼠标悬停在图片上时，`transform: scale(1.1)`将图片放大10%，而`filter: blur(10px)`使图片两边模糊。
通过`image-container:before`伪元素，我们创建了一个遮罩层，其背景是一个从透明渐变到不透明的线性渐变，用于遮住模糊的部分。在鼠标悬停时，通过改变遮罩层的`left`属性，我们可以让模糊效果只显示在图片的左右两侧。
此效果的核心在于`transform`和`filter`属性的组合使用，它们都是CSS3中强大的特性。`transform`可以改变元素的大小、位置和形状，而`filter`则可以应用各种图像处理效果，如模糊、灰度、饱和度等。
这个纯CSS3的解决方案不仅减少了对JavaScript的依赖，也提高了页面性能。通过调整`scale`和`blur`的值，你可以自定义放大效果和模糊程度，以满足不同设计需求。此外，这种效果还可以与其他CSS3动画结合，创造出更丰富的用户体验。
texiao1509_1560681101.zip （6个子文件） 
texiao1509_1560681101 
style.css 3KB
shirts.jpg 57KB
index.html 926B
Readme必读.txt 616B
