html+css鼠标停留自动弹出微信二维码

在html需要放置二维码的地方添加一下代码
 
 
<a class="social weixin" href="javascript:">
<img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
这里是按钮名称
</a>
下面的代码放置到css内
 
a.weixin {
position: relative;
}

.weixin img {
position: absolute;
z-index: 99;
top: -135px;
right: -28px;
width: 7.5rem;
max-width: none;
height: 7.5rem;
transform: scale(0);
transform-origin: top right;
opacity: 0;
border: .3125rem solid #fff;
border-radius: .25rem;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}

.weixin:hover img {
transform: scale(1);
opacity: 1;
}

 

0 个评论

要回复文章请先登录注册