我们在浏览网页时经常会发现,当鼠标滑过页面某块内容或者按钮时,按钮的背景颜色、文字颜色会渐渐变成其他的颜色,有的按钮甚至还会出现边框,阴影等效果,看起来非常有意思.

那么今天,就让长沙网站制作来教您,如何实现4种常用的鼠标滑过特效.

一.页面代码展示

(来源于:长沙网站制作)

二.效果展示

1、按钮渐变背景

使用背景属性中的linear-gradient,为按钮设置一个渐变的背景颜色.再写一个反向的背景颜色并绑定到:hover伪类选择器上.

这样,在光标触碰到按钮时,触发:hover.将按钮的背景颜色由正向变为反向.

（效果示意图）

2、按钮背景填充特效

原本按钮的背景为白色,长沙网站建设将蓝色背景色绑定到伪类选择器上.在鼠标移动上去后,按钮的背景将迅速填充为蓝色.

（效果示意图）

3、按钮阴影特效

鼠标移动上去时,按钮周围会出现一团模糊的蓝色阴影,同时文字颜色也会变成蓝色.

（效果示意图）

4、按钮下划线特效

鼠标悬停时,按钮底部会出现一条从左到右延伸的蓝色下划线.

（效果示意图）

三.实际效果视频展示

四、效果的应用

这几种鼠标滑过特效在所有场景都可以使用,不论是企业官网还是商城.合理的使用特效对用户的体验度也会有很好的提升.

以上则是长沙网站建设整理出的4种鼠标滑过特效的方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航!

资讯电话:0731-84069615.