发布时间:2019-05-20 发布人:助商优 浏览量:
苏州制作网站总要用到二维码,一个好看简洁的二维码既可以点缀网站,也可以更好的分享网站,引进流量。苏州建站小编就带大家了解下两种纯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 来定义二维码的样式,这种作为图片也更好变更路径