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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。