CSS中怎么实现微信扫码特效

CSS中怎么实现微信扫码特效 ，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

代码如下:

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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。