鼠标悬停展示二维码

2019/10/2008:38:04 评论 112 views

其实这真的是很简单的一个代码,但是百度搜一下觉得展示出来的那些一个比一个复杂。

而且有的还是CSS3以及HTML5之前时代的代码。

代码如下,HTML部分:

<!-- 自己加的页脚微信展示开始 -->
<a id="weixin" href="javascript:void(0)">
<i class="fa fa-weixin"></i>
<img src="http://你的路径/qrcode.jpg">
</a>
<!-- 自己加的页脚微信展示结束 -->

CSS部分:

a#weixin {
position: relative;
}
#weixin img {
visibility: hidden;
opacity: 0;
transform: translate(0, 10px);
transition: all 0.3s ease-in-out;
position: absolute;
right: -30px;
bottom: 40px;
width: 150px;
height: 150px;
}
#weixin:hover img {
visibility: visible;
transform: translate(0, 0px);
opacity: 1;
}
原梓番主讲Excel进阶与提升视频课(淘宝在线观看)
Wordpress建站问题咨询解决
PPT精品模板
Excel表格制作

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: