首页 > 代码库 > 纯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过渡效果