CSS实现微信扫码特效-脚本在线

AI智能体脚本智能办公脚本自动化游戏脚本浏览器自动化脚本服务器脚本

CSS实现微信扫码特效

作者：互联网

2026-04-10

HTML教程

微信扫码效果如下所示：

下面是实际效果：(可以自己移动鼠标，尝试效果)(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。) 现在就一个一个效果单独演示：演示demo的HTML内容为：复制代码代码如下:

魔芋

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