当前位置:夜读资讯 > 互联网 > CSS鼠标滑到文字弹出微信二维码 图片淡入淡出
来源:夜读资讯时间:2019-12-27编辑:财富格格

有时候我们做网页的时候,需要用到当鼠标滑到文字或者图片,触发就弹出微信二维码,这种代码怎么写呢,

现在我们提供一个纯CSS的处理方法,不用JS处理,减少JS加载。

<a class="weixin" href="javascript:">手机版</a>

.weixin{position:relative;}
.weixin::after{content: url(http://www.yeduzixun.com/style/img/weixin.png);position: absolute;right: 10px;top: 30px;z-index: 999;width:120px;height: 120px;border: 5px solid #0095ba;border-radius: 4px;transform-origin: top right;transform: scale(0);opacity: 0;-webkit-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.weixin:hover::after{transform:scale(1);opacity: 1;}

声明提示:本篇文章为转载自网络,转载目的在于传递更多信息,不代表夜读资讯赞同其观点和对其真实性负责,或侵犯你的版权或其它问题,请联系本站,我们将第一时间删除内容!

信息聚合

    热门文章