特效php扫一扫,CSS_CSS实现微信扫码特效 ， 微信扫码效果如下所示： - phpStudy

CSS实现微信扫码特效

微信扫码效果如下所示：

下面是实际效果：(可以自己移动鼠标，尝试效果)

(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)

现在就一个一个效果单独演示：

演示demo的HTML内容为：

复制代码代码如下:

魔芋

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();

}

}

相关阅读:

js实现点击图片将图片地址复制到粘贴板的方法

JavaScript Promise启示录

Win7中打开txt文件显示“无法找到脚本文件”解决方法

一张GIF动图浓缩回顾 从Windows 1.0到Win 10正式版进化史

AngularJS基础 ng-keypress 指令简单示例

js之ActiveX控件使用说明 new ActiveXObject()

Android Http实现文件的上传和下载

javascript实现保留两位小数的多种方法

PHP+shell实现多线程的方法

电脑升级到win8系统后导致浏览器无法访问网页怎么办？

js查找某元素中的所有图片地址的方法

centos6.2清除系统缓存的步骤

HTML5中meta属性的使用方法

SQL语句之Union和Union All的用法