有时候希望给用户带来一些炫酷的交互体验,常常会通过鼠标触发一些动态的样式效果!!!这里简单总结一下,以后会不定时补充,谨以此博客作为记录!
增加边框阴影
有时候加一点阴影的效果,页面的逼格立马就提升了
最简单的方法就是通过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);
}