苏州制作网站总要用到二维码，一个好看简洁的二维码既可以点缀网站，也可以更好的分享网站，引进流量。苏州建站小编就带大家了解下两种纯CSS的二维码展示方式，希望对大家有所帮助。

第一种

通过背景图片的透明度加动画事件来实现，手机站底部不推荐这种，实测由于还是在a标签里面，点击时候微信打开无法识别那个是图片二维码，还是认为只是个链接。PC端可以忽视。

 

结构：

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

样式

 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;
  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;
}

通过scale(0)和opacity(0)来实现二维码的隐藏，最后在用个事件来让它显示出来

 

第二种

是把图片写在页面上，展示的也是图片出来。所以这个可以被微信识别，在手机站的底部添加二维码时候，优先选择方案。

 

结构：

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

样式

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 来定义二维码的样式，这种作为图片也更好变更路径