鼠标悬停小案例

鼠标悬停小动画

一、 相关知识点

主要就是两个：一个:hover选择器；一个transform属性。

1. :hover选择器。:hover选择器用于选择鼠标指针浮动在上面的元素，它可用于所有元素，不只是链接。通过它选择到元素并设置悬停时的样式。
   
2. transform属性。transform 属性向元素应用 2D 或 3D 转换。这个属性是复合属性，拥有多种属性值，可以同时设置多种属性值。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
   

二、展示小案例

视频展示的是x轴的缩放。

web悬停

三、HTML布局

<style>		
		body{
    background-color:#000;}
		.bigbox{
    
			width:300px;height