酷炫的微信二维码

         个人博客地址:http://1.liangtao.sinaapp.com/

写在前面

       在博客美化的过程中,须要在右边放置微信二维码,方便读者扫描。只是原微信提供的二维码样式过于单调,呆板。所以就自己做一个呗。话不多说,先看看制作完毕的效果(读者也能够在本网站右側看到效果:http://1.liangtao.sinaapp.com/),很的酷炫哦。

       须要说明的是这一动画效果是:当鼠标到该二维码是产生的,上述图片是对整个动画做了个录制。尽管是一个gif图片,可是用二维码扫面工具仍能够扫到哦,不信的话能够扫一扫加我微信哦。

       接下来,一步步介绍怎样实现。

制作二维码

       首先须要制作像例如以下图一样的微信二维码图片:

     具体的制作步骤例如以下:

     1、首先使用微信app自带的二维码名片功能生成二维码名片(自行百度),保存到手机上,之后转存在PC电脑上。

     2、百度"二维码在线解码"对转存到PC端的二维码图片进行解码得到链接地址,详细做法例如以下:

      3、复制链接地址,之后使用草料二维码生成器生成二维码,操作方式例如以下:

       OK,基本制作已经完毕了,接下来,我们用程序对该二维码图片实现动画效果。

动画效果

       有了二维码图片之后,我们能够使用CSS代码对该二维码图片赋予各式动画效果。直接上代码:

<style>
.pic {
	  200px;
	 height: 200px;
         overflow: hidden;
	 cursor: pointer;
	 border: 8px solid #00AEEF;
	 box-shadow: 0 0 4px rgba(0, 0, 0,0.2);
	 margin: 20px auto;
         position: relative;
}
.pic .top, .pic .bottom {
	 200px;
        height: 200px;
	overflow: hidden;
	position: absolute;
	transform: skew(-45deg);
}
.pic .top {
	left: 0;
	top: 0;
	transform-origin: 100% 0;
	transition:all 1s, transform 0s;
}
.pic .bottom {
	right: 0;
	bottom: 0;
	transform-origin: 0 100%;
	transition:all 1s ease-in, transform 0s;
}
.pic .top img, .pic .bottom img {
	 100%;
	height: 100%;
	transform-origin: inherit;
	transform: skew(45deg);
}
.pic:hover .top {
	left: -20px;
	top: -20px;
}
.pic:hover .bottom {
	right: -20px;
	bottom: -20px;
}
.pic span {
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	position: absolute;
	font-size:15px;
	bottom:-1em;
	opacity: 0;
	transition: all 1s ease-in .2s;
}
.pic:hover span {
	 opacity: 1;
	 text-indent: 6em;
} 
</style>
<div class="pic">
    <div class="top">
        <!--替换自己的微信二维码-->
        <img src="<?php bloginfo('template_url'); ?>/images/weixinme.png">
    </div>
    <div class="bottom">
        <!--替换自己的微信二维码-->
        <img src="<?php bloginfo('template_url'); ?>/images/weixinme.png">
    </div>  
    <span>Oh. Just Do IT!</span>
</div>

         好了,酷炫的微信二维码也就完毕了。

兴许

        两种使用方式,你能够将上述代码嵌入站点中,也能够选择录制一个gif,嵌入网页中。

怎么样,这样的动态的二维码还是比較酷炫的吧,有了这样的思路之后,我们能够使用程序作出各种各样具有动画效果的二维码。

SO,做一个属于自己的酷炫二维码吧!