热搜:前端 nest neovim nvim

利用CSS3创建炫酷的三角背景图像

lxf2023-05-28 19:30:02

在本文《利用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>

实际效果如图所示:

利用CSS3创建炫酷的三角背景图像

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);
}

利用CSS3创建炫酷的三角背景图像

那样完成的照片放大效果是别扭的,鼠标悬停忽然就放大,可以用transition特性添加一个过渡效果,由于该属性css3的一个新特性,要加上作为前缀来适配其他浏览器

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;  /* 适配chorme */
  transition: 0.3s linear;
}

利用CSS3创建炫酷的三角背景图像

这个就完成鼠标悬停照片放大效果了。但这样的放大效果有点儿简单,我们能给图片设置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);
}

利用CSS3创建炫酷的三角背景图像

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其他类似文章!