css3实现微信扫码登陆动画

最新推荐文章于 2024-05-31 23:20:48 发布

天天打码

最新推荐文章于 2024-05-31 23:20:48 发布

阅读量397

点赞数 3

分类专栏：大前端文章标签： css3 微信前端

本文链接：https://blog.csdn.net/tianlu930/article/details/137871494

版权

大前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文介绍了如何使用CSS3和图片来制作微信扫码登陆时的上下移动的背景光图动画，通过CSS关键帧和Webkit扩展实现了动画效果。

摘要由CSDN通过智能技术生成

在做微信扫码登陆时，出现一个背景光图上下扫码动画，用css3+图片实现。
实现原理：
1.准备一个渐变的背景.png图
2.css动画帧实现动画

看效果：
在这里插入图片描述
css代码：

#wx-scan{position: absolute;top:0px;left: 50%;z-index: 3;margin-left: -100px;height: 200px;overflow: hidden}
#wx-scan:after{content: '';display: block;width:100%;position: absolute;top:-60px;right: 0;background:url("../images/scan_bg.png") center center no-repeat;background-size: cover;height: 60px;z-index: 999;animation: scan 3s linear infinite;-webkit-animation: scan 3s linear infinite;}
@keyframes scan {from{top:-60px;} to{top: 260px}}
@-webkit-keyframes scan {from{top:-60px;} to{top: 260px}}