首页 > 代码库 > 纯css3实现 transtion过渡效果
纯css3实现 transtion过渡效果
css3 鼠标:hover效果会平滑过渡,但鼠标离开,效果消失的太生硬,能不能和:hover一样平滑过渡?
<a href=""> <img src="image/portfolio-03.jpg" alt=""> <b class="block"></b></a>
最终实现效果:鼠标划入img上去,b标签以遮罩层的方式出现
鼠标移出img,b标签以遮罩层的方式平滑过渡消失
要想利用hover伪类来实现以上效果,
首先:b标签必须在鼠标划入的元素里面,即b标签必须以子元素的形式出现:a:hover .b{}设置鼠标进入图片时遮罩层的显示效果,如果想平滑进入设置transtion (这里a标签和img一样)
其次:鼠标离开时遮罩层通常会很生硬的消失,方法在 b元素先设置transtion b{transtion: }
纯css3实现 transtion过渡效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。