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