CSS实现微信扫码特效

(编辑:jimmy 日期: 2024/10/31 浏览:2)

 微信扫码效果如下所示:

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

效果:

CSS实现微信扫码特效


淡出就是调整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);
}
}

CSS实现微信扫码特效


(魔芋解释:由于录制gif图片效果不是很好,请见谅。)

弹跳

改变transform:translateY的值


复制代码代码如下:
@-webkit-keyframes change {
%,
%,
%,
%,
%{
-webkit-transform: translateY();
}
%{
-webkit-transform: translateY(-px);
}
%{
-webkit-transform: translateY(-px);
}
}

CSS实现微信扫码特效

弹入透明度结合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();
}
}

CSS实现微信扫码特效

翻转

复制代码代码如下:
@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;
}
}

CSS实现微信扫码特效

闪烁

复制代码代码如下:
@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}

CSS实现微信扫码特效


震颤

复制代码代码如下:
@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}

CSS实现微信扫码特效


摇摆:

复制代码代码如下:
@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}

CSS实现微信扫码特效


摇晃:

复制代码代码如下:
@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();
}
}

CSS实现微信扫码特效


响铃:

复制代码代码如下:
@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。