在本文《利用CSS3创建炫酷的三角背景图像》中，大家阐述了运用CSS3建立酷炫三角背景图像的办法，让页面看起来高端感十足！这次我们来讲讲怎么使用纯CSS3完成鼠标悬停照片放大特效，感兴趣的朋友可以去了解一下~
鼠标悬停照片放大特效是一个非常有用且吸人眼球的特效，能够给网页页面加上交互性，当客户悬浮电脑鼠标在图片里，照片要稍微的变大。适用照片展示网页页面，能够极大地提升用户的体验感！
接下来我们就先直接用编码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
width: 220px;
height: 220px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 220px;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}
/* ==============
* 灰度值ps滤镜
* ==============*/
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* ==============
* 棕褐色ps滤镜
* ==============*/
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="demo/img/1.jpg"/>
</div>
<!-- 灰度值ps滤镜 -->
<div class="img-wrapper">
<img class="grayscale-img" src="demo/img/1.jpg"/>
</div>
<!-- 棕褐色ps滤镜 -->
<div class="img-wrapper">
<img class="sepia-img" src="demo/img/1.jpg"
/>
</div>
</body>
</script>
</body>
</html>实际效果如图所示：
OK，下边来分析一下上边的代码：
最先创建一个div包囊img标识，该div器皿作用是：遮盖住照片，当图片变大时，不许照片超过大家所规定的宽高比之外。想让div完成这一功效，就需要一个重要款式overflow: hidden；那样当图片变大时，超过一部分能被掩藏。
<div class="img-wrapper">
<img src="demo/img/1.jpg"/>
</div>
.img-wrapper {
width: 220px;
height: 220px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}接着就是实现图片放大效果了，我这边采用的是transform: scale(1,1)款式。transform特性可向原素运用 2D 或 3D 变换，而scale主要是用于变大（整数金额便会变大）或是变小（负值便会变小）元素。
.img-wrapper img {
height: 220px;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
那样完成的照片放大效果是别扭的，鼠标悬停忽然就放大，可以用transition特性添加一个过渡效果，由于该属性css3的一个新特性，要加上作为前缀来适配其他浏览器
.img-wrapper img {
height: 220px;
-webkit-transition: 0.3s linear; /* 适配chorme */
transition: 0.3s linear;
}
这个就完成鼠标悬停照片放大效果了。但这样的放大效果有点儿简单，我们能给图片设置ps滤镜特性filter，让照片放大效果更华丽！
不妨先让照片变灰（filter: grayscale(100%)）或是变棕褐色（filter: sepia(100%)），随后鼠标悬停时，在图片变大的同时存在色调变幻莫测（除掉转场特效就可以），那么就会让动画特效更华丽。
<!-- 灰度值ps滤镜 -->
<div class="img-wrapper">
<img class="grayscale-img" src="demo/img/1.jpg"
/>
</div>
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
<!-- 棕褐色ps滤镜 -->
<div class="img-wrapper">
<img
class="sepia-img"
src="demo/img/1.jpg"
/>
</div>
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
ps滤镜特性filter定义了原素(一般是<img>)的可见功效(比如：模糊不清与对比度)。
能设的转场特效：
blur(px)：给图像设置高反差保留。brightness(%)：给照片运用一种线形乘除法，使之看起来更加亮或更加暗。contrast(%) ：调节图像饱和度。drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。
grayscale(%)：将图像转换为二值图像
hue-rotate(deg) ：给图象运用色彩转动。
invert(%) ：翻转键入图象。
opacity(%)：转换图像全透明水平。
saturate(%)： 变换图象对比度。
sepia(%) ： 将图像转换为棕褐色。
AdminJS服务平台有很多的在线视频教学网络资源，欢迎各位学习培训《css视频教程》！
以上就是关于怎么使用纯CSS3建立酷炫图像放大实际效果？的具体内容，大量欢迎关注AdminJS其他类似文章！
声明：本文为原创，版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载必须注明本文地址!
原文地址：利用CSS3创建炫酷的三角背景图像发布于2023-05-28 19:30:02
