澳门六下彩开奖结果

利用CSS在WordPress网站中实现鼠标悬停及弹出微信二维码

要在网站实现实现鼠标悬停弹出微信二维码的功能其实有很多方法,网上搜索一下也有很多办法。今天给大家说说用CSS来实现这一效果。

首先,既然是通过CSS来实现,那么就要在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;
}

澳门六下彩开奖结果加上上面代码,其实效果已经实现了,接下来就要在网站前端展现出来了,于是,我们就可以利用一段html代码就可以调用了。代码如下:


<a class="social weixin" href="javascript:">
  <img class="qrcode" src="二维码图片澳门六下彩开奖结果" alt="微信二维码">
<i class="fab fa-weixin"></i>//此处放微信图标
</a>

澳门六下彩开奖结果这里需要说明的:放微信图标的地方,我是以Font Awesome为例,假设你网站用的是其他图标,按照他们的格式复制进去就可以了。

那么,也可以利用上面这个,实现页面文章自动生成二维码并分享到微信朋友圈。

澳门六下彩开奖结果只需要在上面第二段代码中把放二维码澳门六下彩开奖结果的代码换成自动生成二维码的代码,嗯,这句话好像很拗口,网上有很多分享自动生成二维码的文章,那些都是利用第三方API实现的,随着时间的流逝,有些被墙了,有些变得不稳定了,有些没有开启https了,还有一些失效了。

澳门六下彩开奖结果所以,今天我就是分享一个就可以了,代码如下


<img src="https://www.kuaizhan.com/common/encode-png?large=true&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

澳门六下彩开奖结果那么,WordPress页面文章自动生成二维码并分享到微信朋友圈的完整代码就是,


<a class="social weixin" href="javascript:">
  <img class="qrcode" <img src="https://www.kuaizhan.com/common/encode-png?large=true&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/> alt="微信二维码">
<i class="fab fa-weixin"></i>//此处放微信图标
</a>

当然,也别忘了把最最上面那段代码加到CSS里面。

评论0

请先

没有账号? 忘记密码?