现在的位置: 首页 > web前端 > 正文

纯CSS3实现超酷的鼠标悬停效果

2020年02月12日 web前端 ⁄ 共 3912字 ⁄ 字号 评论关闭

本文给大家介绍下不需要任何javascript代码,仅使用纯CSS3和HTML实现鼠标悬停的超酷效果,鼠标在悬停目标元素上的时候可以实现常见的线条变化、翻转、缩放、滑动等等动画效果。

HTML

我们在.he_border1里放置一张图片,以及图片说明信息。

<p class="box"> <p class="he_border1"> <img class="he_border1_img" src="pro_1.jpg" alt="Image 01"> <p class="he_border1_caption"> <h3 class="he_border1_caption_h">Helloweba</h3> <p class="he_border1_caption_p">WEB前端应用教程+演示+源码</p> <a class="he_border1_caption_a" href="http://www.xuebuyuan.com/" target="_blank"></a> </p> </p> </p>


CSS

我们要实现的效果是,当鼠标放到图片上时,图片放大,图片上方将出现一个带透明度的遮罩层,并且出现四条线框变化动画,最终四条线框闭合成方形,在方形里显示图片说明文字。这种效果在很多图片站、以及产品列表页应用非常广泛。

.he_border1{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_img{display:block;width:100%;padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden} .he_border1:hover .he_border1_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} .he_border1 .he_border1_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_caption::before,.he_border1 .he_border1_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} .he_border1 .he_border1_caption::before{top:8%;right:10%;bottom:8%;left:10%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0} .he_border1 .he_border1_caption::after{top:8%;right:10%;bottom:8%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} .he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} .he_border1 .he_border1_caption,.he_border1 .he_border1_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} .he_border1 .he_border1_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} .he_border1 .he_border1_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} .he_border1:hover .he_border1_caption_p{top:45%;opacity:1}

以上代码充分利用了CSS3的动画属性transform的使用,将鼠标悬停动画效果展现出来。欢迎查看演示DEMO更多的鼠标悬停效果:缩放、翻转、滑动等等。

以上就上有关纯CSS3实现超酷的鼠标悬停效果的相关介绍,要了解更多CSS3内容请登录学步园。

抱歉!评论已关闭.