CSS实现微信扫码特效
发布时间：2016-01-12 16:10:51 作者：佚名 
我要评论
我要评论这篇文章主要介绍了微信扫码特效 的相关资料,需要的朋友可以参考下
微信扫码效果如下所示：
下面是实际效果：(可以自己移动鼠标，尝试效果)
(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)
现在就一个一个效果单独演示：
演示demo的HTML内容为：
复制代码
代码如下:<div class="moyu">魔芋</div>
CSS：
复制代码
代码如下:div {
width:px;
height:px;
background: red;
margin:px;
color:#fff;
line-height:px;
font-size:px;
text-align:center;
}
--------------------------------------------------------------------------------
淡入：（改变透明度）
复制代码
代码如下:moyu {
-webkit-animation: change s ease;
animation: change s ease;
}
@-webkit-keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
@keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
效果：
淡出就是调整opacity从1到0.
淡入-从下
说明：就是加是transform 的translate
复制代码
代码如下:moyu {
-webkit-animation: change s ease infinite;
animation: change s ease infinite;
}
@-webkit-keyframes change {
%{
opacity:;
-webkit-transform:translateY(-px);
transform:translateY(-px);
}
%{
opacity:;
-webkit-transform:translateY(px);
transform:translateY(px);
}
}
@keyframes change {
%{
opacity:;
-webkit-transform:translateY(-px);
transform:translateY(-px);
}
%{
opacity:;
-webkit-transform:translateY(px);
transform:translateY(px);
}
}
（魔芋解释：由于录制gif图片效果不是很好，请见谅。）
弹跳
改变transform:translateY的值
复制代码
代码如下:@-webkit-keyframes change {
%,
%,
%,
%,
%{
-webkit-transform: translateY();
}
%{
-webkit-transform: translateY(-px);
}
%{
-webkit-transform: translateY(-px);
}
}
弹入透明度结合transform:scale
复制代码
代码如下:@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: scale(.);
}
%{
opacity:;
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale();
}
}
转入
复制代码
代码如下:@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: rotate(-deg);
}
%{
opacity:;
-webkit-transform: rotate();
}
}
翻转
复制代码
代码如下:@keyframes change {
%{
transform: perspective(px) rotateY();
animation-timing-function: ease-out;
}
%{
transform: perspective(px) translateZ(px) rotateY(deg);
animation-timing-function: ease-out;
}
%{
transform: perspective(px) rotateY(deg) scale(.);
animation-timing-function: ease-in;
}
%{
transform: perspective(px) scale();
animation-timing-function: ease-in;
}
}
闪烁
复制代码
代码如下:@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}
震颤
复制代码
代码如下:@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}
摇摆：
复制代码
代码如下:@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}
摇晃：
复制代码
代码如下:@keyframes change{
%{
transform: translateX();
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX();
}
}
响铃：
复制代码
代码如下:@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}
相关文章
- 滴滴打车软件补贴模式仍在继续，近日滴滴上线出租车乘客用微信扫码支付就能优惠车费的活动，本文我们就一起来看看滴滴打车出租车微信扫码支付立减车费送红包详情。2015-06-14
微信扫码关注诸葛理财 100%得1~5元微信现金红包 秒到账
活动期间参与诸葛理财举办的关注微信送红包活动的用户，通过成功关注【诸葛理财】官方微信号并点击自动推送内容进入活动页面使用手机号码完成注册即可100%获得1-5.2元微信2015-05-19微信扫码注册简理财 秒提现2.19元 累计收益15.33元(亲测提现)
微信扫码注册简理财，秒提现2.19元，另送10000元体验金，累计收益15.33元。小编亲测提现是秒到银行卡的，小编就为大家操作流程，一起来看看吧2015-05-07- 微信扫码关注搜狐视频公众号即可100%领取7天以上搜狐视频去广告会员特权，感兴趣的朋友们可以关注看看2015-04-13
- 近日腾讯应用宝上线扫红码抢红包活动，下面小编就为大家带来应用宝微信扫码下载百分百得红包2015-03-30
微信扫码安装快乐赚 100%免费领取微信现金红包(仅安卓手机)
微信又出活动了，这次是扫描安装快乐赚，就可100%免费领取微信现金红包。教程很简单哦，下面就为大家介绍一下，不过这次活动仅限安卓手机，苹果手机是没有的2015-01-14
最新评论