CSS3实现伪类hover离开时平滑过渡效果示例
发布时间:2017-08-10 16:33:45 作者:NoHeroes 我要评论
本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例,具有一定的参考价值,有兴趣的可以了解一下
由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,CSS3便可以帮你解决这些问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>离开时效果生硬</title> <style type="text/css"> div{ width: 100px; height: 100px; border:1px solid; margin:0px auto; margin-top: 200px; } div:hover{ transform: scale(2); transition: all 1s linear; } </style> </head> <body> <div></div> </body> </html>
由于div元素只有在:hover伪类触发的时候,效果才能加到div元素上。
当鼠标离开div元素的时候,:hover伪类将不再生效,瞬间丢掉hover里写的动画效果。
此时,我们应当在原本元素上再写一个一模一样的transition效果,将离开断掉的动画效果续接上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>简单解决</title> <style type="text/css"> div{ width: 100px; height: 100px; border:1px solid; margin:0px auto; margin-top: 200px; /* 在原本元素上再加一个transition */ transition: all 1s linear; } div:hover{ transform: scale(2); transition: all 1s linear; } </style> </head> <body> <div></div> </body> </html>
此时,不管鼠标在什么时候离开元素,都会原样返回。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这是一款使用CSS3制作鼠标hover图片遮罩层动画特效,在鼠标hover图片时,会生成一个不同颜色的遮罩层,并显示文字2017-06-27
- 这是一套鼠标hover按钮动画特效代码。5种效果,在结构布局上使用flex来进行布局,并通过css transition来实现动画效果,欢迎下载2017-04-10
- 本文主要介绍了CSS3制作hover下划线动画的方法步骤。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
16种基于css3 Bootstrap图片hover悬停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。共16种特效遮罩,欢迎下载2017-03-13- 是一款基于jQuery+css3实现的鼠标经过遮罩图片会出现翻转特效的代码,效果非常大方时尚,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-05-21
- 鼠标hover 以后,图片上面出现一个遮罩透明度变化,显示设置好的文字,完全使用css 实现,效果如下,喜欢的朋友可以参考下2013-11-05
- CSS3创意按钮鼠标经过翻转特效是一款分为4种颜色和3种尺寸大小,并且在鼠标滑过按钮时带有炫酷的翻转效果,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用2016-11-14
- 纯CSS3 3D魔方翻转动画特效源码是一款使用简单纯CSS3代码实现的魔方特效下载,效果非常棒,本段代码适应于所有网页使用,有需要的朋友可以直接下载使用2016-08-10
- 这是一款基于纯css3实现的鼠标滑过图片左右3d翻转效果源码。鼠标滑过图片可见图片呈现出翻转的效果,该3d翻转效果由纯css3实现,不含任何js元素2016-07-25
- 这是一款纯css3实现的3D方块翻转动画特效源码。画面中心的立方体方块自身做翻转运动,方块外围的圆环也随着方块的转动做旋转运动,整体效果流畅自然。该特效动画采用纯css32016-07-22
最新评论