个人博客地址: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