1006网站建设,安溪哪里有学做网站,手机怎么做钓鱼网站,呼伦贝尔网站设计有时候希望给用户带来一些炫酷的交互体验#xff0c;常常会通过鼠标触发一些动态的样式效果#xff01;#xff01;#xff01;这里简单总结一下#xff0c;以后会不定时补充#xff0c;谨以此博客作为记录#xff01; 增加边框阴影
有时候加一点阴影的效果#xff0c… 有时候希望给用户带来一些炫酷的交互体验常常会通过鼠标触发一些动态的样式效果这里简单总结一下以后会不定时补充谨以此博客作为记录 增加边框阴影
有时候加一点阴影的效果页面的逼格立马就提升了 最简单的方法就是通过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);
}
