通过鼠标移入移出增加页面交互效果

有时候希望给用户带来一些炫酷的交互体验，常常会通过鼠标触发一些动态的样式效果！！！这里简单总结一下，以后会不定时补充，谨以此博客作为记录！

增加边框阴影

有时候加一点阴影的效果，页面的逼格立马就提升了
最简单的方法就是通过css属性来设置
在css中，可以使用box-shadow属性来边框阴影效果。此属性可设置阴影的像素长度，宽度和模糊的距离以及阴影的颜色。

box-shadow: h-shadow v-shadow blur spread color inset;

各个组成部分的含义如下：

• h-shadow (必需): 这是阴影的水平偏移距离，正值会将阴影移动到元素的右侧，负值会将其移动到左侧。

• v-shadow (必需): 这是阴影的垂直偏移距离，正值会将阴影移动到元素的下方，负值会将其移动到上方。

• blur (可选): 这个值定义了阴影的模糊半径。如果设置为0（默认值），则阴影边缘锐利。值越大，阴影越模糊。

• spread (可选): 这个值定义了阴影的尺寸扩展。正值会让阴影扩散得更大，负值会让阴影收缩得更小。

• color (必需): 定义阴影的颜色。可以使用颜色名、十六进制值、RGB、RGBA、HSL 或 HSLA 值。

• inset (可选): 如果包含这个关键字，则创建的阴影是内阴影（inset-shadow），而不是外阴影（outset-shadow），这会使得阴影看起来像是在元素内部，而不是外部。

鼠标进入有放大效果

最简单的方法就是通过CSS属性来设置
在CSS中，transform属性的scale函数用于对元素进行缩放

具体来说，scale函数的两个参数分别对应X轴和Y轴的缩放比例：

• 第一个参数（1.2）控制X轴方向的缩放，即元素的宽度会被放大到原来的1.2倍。
• 第二个参数（1.2）控制Y轴方向的缩放，即元素的高度也会被放大到原来的1.2倍。
  如果只提供一个参数，那么该参数会同时应用于X轴和Y轴，即在两个方向上进行相同比例的缩放。

具体实现
假如你现在有一个样式：

.style{
	height:100px;
	width:100px;
	box-shadow: 5px 5px 9px 0px #d3ddec;
}
/*设置放大效果*/
.style:hover{
	transform: scale(1.2, 1.2);
}