CSS實現微信掃碼特效

2024-07-11 08:29:37

字體：大中小

來源：轉載

供稿：網友

微信掃碼效果如下所示：

下面是實際效果：(可以自己移動鼠標，嘗試效果)
(由于篇幅長度，沒有加兼容性前綴，演示環境為谷歌瀏覽器。)

現在就一個一個效果單獨演示：

演示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);
}
}