CSS3缩放图像动画效果悬停-IGI

时间：2020-02-23 14:30:13 　来源:igfitidea点击:

今天，我们将鼠标悬停在CSS3 Zoom Image动画效果上。
由于图像是的灵魂，因此您肯定可以尝试为它们添加一些很酷的悬停效果。

CSS3缩放图像

在本教程中，我写下了一些有用的示例，这些示例使用CSS转换和过渡属性创建完美CSS3缩放图像效果。

是什么使CSS3成为实现图像缩放效果的最佳选择？

尽管您可能会找到大量用于创建图像缩放效果的jQuery插件，但CSS3可能是最推荐的插件。
原因是其无缝的跨浏览器兼容性，这使您免于添加冗长的jQuery代码带来的麻烦。

我将在此CSS缩放图像教程中看到的三个示例包括：

作为第一个示例，我将使用transform：scale(2)和transition：all .3s ease-out实现缩放效果。
以第二个示例为例，我将使用两幅图像来实现缩放效果，其中第二幅图像将悬停在父图像的右侧。
按照第三个示例，我将使用两个图像来实现缩放效果，其中第二个图像将在鼠标悬停时显示在与CSS父图像的当前位置相关的预定义位置， (0，300px);`

让我们从悬停动画上CSS图像缩放的第一个示例开始

在此示例中，我使用了2张图像来展示缩放效果。
这是将在此处使用CSS过渡和转换属性的详细说明：

过渡：所有.3s过渡期-此过渡属性将包括以下值：过渡：[过渡属性] [过渡持续时间] [过渡时机功能] [过渡延迟]；

如上所述，过渡属性将具有全部(逗号分隔)或者没有CSS属性，过渡持续时间将包含将确定完成过渡所需时间的值。
这将以秒和毫秒为单位显示。

除此之外，过渡计时功能将用于指定在整个持续时间内修改过渡的速度变化(此处，我指的是为过渡持续时间设置的值)。
transition-timing-function属性可以包含以下值：

线性：表示为图像过渡将保持一致的速度
缓入：代表动画将缓慢开始并以高速完成
缓出：表示动画将以全速开始并以慢速结束
缓入缓出：表示动画将缓慢开始，在中间点以最快的速度运行，然后缓慢结束
缓入就像缓入动画一样，它表示动画的操作方式与缓入动画相同，只有一个例外，即在开始过程中，动画的速度比缓入动画的速度略快。
结束。

最后，会有过渡延迟，它表示从触发过渡开始的时间延迟。

Transform：scale(2)：这是一个CSS Transform属性，将用于增加或者减小特定图像元素的大小，其中scale(2)表示您可以将图像元素缩放到两倍它的原始大小。
其中我将使用两个值viz：x和y，分别用于水平和垂直拉伸图像元素。

与该示例关联的代码如下所示：

css3-hover-zoom1.html

<!DOCTYPE HTML>
<html> 
<head>
<style type="text/css">
div{ 
	padding:25%;
	float: left; 
} 
.parentimage { 
	width: 300px;
	height: 300px; 
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
} 
.parentimage:hover {
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
} 
</style>
</head>
<body>
<div>
	<img class="parentimage" src="Images/image1.jpg" 
	<img class="parentimage" src="Images/image2.jpg" 
	<img class="parentimage" src="Images/image3.jpg" 
	<img class="parentimage" src="Images/image4.jpg" 
</div> 
</body> 
</html>

现在，让我们了解第二个示例中发生的情况

其中我将使用四张图片中的每张图片两次。
此处使用的过渡属性将包括以下提到的属性：

position：absolute –此属性将应用于父图像的第二版本，因此当在网络浏览器中显示相同版本(此处是指图像的第二版本)时，它不会影响其他页面元素。
宽度：0像素-此属性将用于隐藏主/父图像的第二个版本
过渡：宽度0.3s线性0s –此属性将用于在整个过渡期间保持一致的速度。
为了更好地了解此属性，建议阅读第一个示例。

与该示例关联的代码如下所示：

css3-hover-zoom2.html

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
  div{  
      padding:20%;  
      float: left;  
  }  

  .parentimage{  
      width: 300px;  
      height: 300px;  
  }  
  .parentimageLarge{  
      position:absolute;  
      width: 0px;  
      transition: width 0.3s linear 0s;  
      z-index: 12;  
  }  
  .parentimage:hover + .parentimageLarge{  
      width:600px;  
      height:600px;                 
  }         

</style>        
</head>  

<body>  
<div>  

<img class="parentimage" src="Images/image1.jpg"             
<img class="parentimageLarge" src="Images/image1.jpg"   

<img class="parentimage" src="Images/image2.jpg"   
<img class="parentimageLarge" src="Images/image2.jpg"   

<img class="parentimage" src="Images/image3.jpg"   
<img class="parentimageLarge" src="Images/image3.jpg"   

<img class="parentimage" src="Images/image4.jpg"   
<img class="parentimageLarge" src="Images/image4.jpg"   
  
</div>          
</body>     
</html>

最后，让我们了解CSS缩放图片动画的第三个示例

该示例与示例2绝对相似，仅一个不同之处在于所得图像位于不同位置。
这里使用的transform属性是：

transform：translate(0,300px)：此属性用于将图像元素从当前位置移动到新位置。

与该示例关联CSS3代码如下所示：

.parentimage:hover + .parentimageLarge{ 
width:600px; 
height:600px; 
transform: translate(0,300px); 
}

CSS3缩放图像动画效果悬停