今天小编跟大家讲解下有关CSS实现微信扫码特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现微信扫码特效 的相关资料，希望小伙伴们看了有所帮助。
微信扫码效果如下所示：
下面是实际效果：(可以自己移动鼠标，尝试效果)(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。) 现在就一个一个效果单独演示： 演示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); } }
弹入透明度结合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(); } }
来源：爱蒂网
