酷炫的微信二维码

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

写在前面

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

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

接下来,一步步介绍如何实现。

制作二维码

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

详细的制作过程如下:

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

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

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

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

动画效果

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

<style>
.pic {
	 width: 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 {
	width: 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 {
	width: 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,做一个属于自己的酷炫二维码吧!

时间: 2024-10-11 16:26:55

酷炫的微信二维码的相关文章

微信二维码登录原理

在电脑上使用微信时,你可能已经发现微信不提供传统的账号密码登陆,取而代之的是通过扫描二维码进行登陆.今天就要研究下次登陆方式微信时如何实现的? 1.每次用户打开PC端登陆请求,系统返回一个唯一的uid,并将uid的信息绘制成二维码返回给用户.这里的uid一定是唯一的,否则就会造成你登陆了其他用户的账号或者其他用户登陆你的账号. 2.当用户使用登陆后的微信扫描该二维码的时候,会将这个uid和手机上的微信账号及密码产生的token进行绑定,并上传到服务器. 3.WEB通过JS不断的向后端发起请求,查

你的微信二维码是唯一的吗?【微信二维码的秘密】

最近听说有一老板被一科技公司业务员忽悠,说"您赶快来注册您唯一的二维码吧!否则,会被别人抢注的!" 很多人以为自己的微信二维码.网站的二维码是唯一的,果真如此吗?事实上,不是! 你的二维码可以是多种多样的,这里以我所掌管的"掌上龙岗"微信号为例进行说明. "掌上龙岗"的微信号是szlgwx,二维码则可以至少用以下几种: (L)(M)(Q)(H) 打开你的手机,使用手机微信"扫一扫"功能,扫描上面几种和下面的二维码,均可直接添加

用微信二维码登录自己的网站

地址:http://www.cnblogs.com/loogn/p/3727953.html用微信二维码登录自己的网站 一.当用户选择用微信二维码登录时,我们要在用户页面里生成一个guid做为客户端的唯一标识,然后带着这个guid请求二维码图片地址,得到地址后,显示给用户.请求到后台的时候要将此二维码的Key和客户端的guid关联到一起.注意这个key的生成方式,要保证多人同时用二维码登录而不冲突,比如用10000自增,隔断时间又重置到10000. 二.得到二维码后,马上发出长链接请求登录标识(

微信公众平台开发(121) 微信二维码海报

关键字:微信公众平台 二维码 海报作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/weixin-poster.html 本文介绍微信公众平台下二维码海报的开发过程. 一.微信二维码海报介绍 微信二维码海报是指在海报中嵌入和微信用户关联的参数二维码的海报,用户分享推广之后,新用户可以被统计为被推广人员数,从而达到增加粉丝的传播效果.其使用场景如下:   二.开发流程 在微信二维码海报生成中,需要用到以下信息 1. 自定义菜单中设置一个菜单项,点击后返回二维

微信二维码防伪

微信二维码防伪应用介绍 如今各大企业都在考虑如何做到产品线上线下发展,微信是现如今O2O发展最为前沿的科技产物,防伪公司现如今在二维码.微信防伪方面不断的取得了新的创新,如何真正帮助企业更好的实现线上宣传,线下销售,也是防伪公司如今考虑最为重要的原因之一,本篇通过凯迅惠商防伪公司如何利用微信防伪.二维码防伪给企业产品做到既能防伪.又能给企业宣传和营销起到重要作用. 微信防伪价值 微信防伪是现如今市场中新推出的防伪产物之一,根据如今企业发展,微信用户群的不断增加,微信防伪也在防伪行业展开,微信防伪

JAVA实战教程_JAVA案例开发之JAVA开发微信二维码大数据开发03

大家好,这次是第三个课时的视频,欢迎大家继续学习. 视频简介:本视频是关于JAVA实战教程,JAVA开发微信二维码大数据系统.这个JAVA开发案例可以协助一些从零基础开始学习JAVA,正处于理论走完实践的路程上的初学者能接触到实际开发项目过程中,在实践当中巩固自己的JAVA方面的知识外,更能在项目案例当中学到解决在JAVA学习或者实践当中遇上问题的一些解决方式.仅供参考!自设交流群:457036818,欢迎一起加入交流. PS:该案例共十个课时,本小节为第二课时 课程原地址:http://www

JAVA实战教程_JAVA案例开发之JAVA开发微信二维码大数据系统02

hello,上一次我们上传了第一个课时的视频,现在当然是上传第二个视频咯. 视频简介:本视频是关于JAVA实战教程,JAVA开发微信二维码大数据系统.这个JAVA开发案例可以协助一些从零基础开始学习JAVA,正处于理论走完实践的路程上的初学者能接触到实际开发项目过程中,在实践当中巩固自己的JAVA方面的知识外,更能在项目案例当中学到解决在JAVA学习或者实践当中遇上问题的一些解决方式.仅供参考!自设交流群:457036818,欢迎一起加入交流. PS:该案例共十个课时,本小节为第二课时 课程原地

用户扫码微信二维码生成订单(三)

官方API:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 首先要修改/lib/HttpService.cs 把Get和Post中的的设置代理服务器代码进行隐藏: 修改前: WebProxy proxy = new WebProxy();proxy.Address = new Uri(WxPayConfig.PROXY_URL);request.Proxy = proxy; 修改后: //WebProxy proxy =

注册绑定页面及微信二维码登陆页面开发项目总结

乐帝来到新的实习单位,也许是之前面试或者在爱奇艺实习的履历,很快被项目组"委以重任".而不是老套路刚入职,先在架构师那培训两周,专心钻研框架,不问具体业务.乐帝只有几天看框架的时间,当被分配给框架页面时,还是不能得心应手,正如同事所说,学习还得按部就班,写写例子,看代码是不行的.    目前这家公司类似<走出软件作坊>作者阿朱所在行业,是面向中大型企业,提供人才管理解决方案的软件公司,时髦的词叫SAAS.这类公司层次要比外包公司高,却还有很多外包公司的特点,不像互联网公司有