鼠标悬停弹出二维码图片方法

这个特效我觉得很实用,第一就是不占用空间,用户仅仅是在有需要的时候自己点击请求获取图片,让页面更简洁明了!

应用场景也很多,比如常见的二维码关注,打赏,群等等,总要的是还可以装逼,让网站更加有逼格,给别人一种高大尚的赶脚!

纯css实现就更装逼了,没有引入js,这样网站速度丝毫不会受到影响。下面我将给出两种实现方案,供大家参考学习!

方案一

第一步

在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用,不做跳转,实现url访问拦截。

<a class="weixin" href="javascript:">
    wechat
</a>

第二步

在样式表style.css中添加如下代码

/*微信二维码*/
a.weixin {
	position: relative;
}

.weixin::after {
	content: url(images/qrcode.gif);
	position: absolute;
	right: -28px;
	top: -135px;
	z-index: 99;
	width: 120px;
	height: 120px;
	border: 5px solid #0095ba;
	border-radius: 4px;
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

首先父元素添加相对定位,然后以”:after” 伪元素在<a></a>元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。

第三步

同样在style.css中添加如下代码

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

当鼠标经过时显示二维码。

方案二(推荐)

上面的代码中使用了”:after”伪类元素,是在css中引入二维码文件,其实我们也可以利用img标签将二维码图片放在html中,结构如下:

<a class="social weixin" href="javascript:">
    <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码">
//此处为微信图标。
</a>

自然css样式也要做相应的改变,如下:

a.weixin {
	position: relative;
}

.weixin img.qrcode {
	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 #0085ba;
	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.qrcode {
	transform: scale(1);
	opacity: 1;
}

transform-origin: 定义二维码图片弹出原点位置,其用法参考CSS3 transform-origin 属性无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。大功告成,接下来看看效果吧,可以通过修改css样式适当调整二维码的位置,大小等。

  1. 香草大叔说道:

    来着QQ小程序的评论!

    1. 蔡俊毅说道:

      测试一下

      1. 香草大叔说道:

        测试一下