人生在世，想美好的事情，就会找到快乐，走向成功；想失意的事情，就会走向失望的深渊，无力面对生活和失败。
微信扫码效果如下所示：
下面是实际效果：(可以自己移动鼠标，尝试效果)
(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)
现在就一个一个效果单独演示：
演示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();
}
}
以上就是CSS如何实现微信扫码特效。企业家只有两只眼睛不行，必须要有笫三只眼睛。要用一只眼睛盯住内部管理，最大限度地调动员工积极性；另一只眼睛盯住市场变化，策划创新行为；第三只眼睛用来盯住国家宏观调控政策，以便抓住机遇，超前发展。更多关于CSS如何实现微信扫码特效请关注haodaima.com其它相关文章！
