css3实现微信扫码登陆动画

news2024/12/23 15:03:35

在做微信扫码登陆时,出现一个背景光图上下扫码动画,用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}}

扫码背景图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1601711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

错误分析 (Machine Learning研习十九)

错误分析 您将探索数据准备选项,尝试多个模型,筛选出最佳模型,使用 Grid SearchCV微调其超参数,并尽可能实现自动化。在此,我们假设您已经找到了一个有前途的模型,并希望找到改进它的方法。其中一种方法就…

数据密集型应用系统设计 PDF 电子书(Martin Kleppmann 著)

简介 《数据密集型应用系统设计》全书分为三大部分: 第一部分,主要讨论有关增强数据密集型应用系统所需的若干基本原则。首先开篇第 1 章即瞄准目标:可靠性、可扩展性与可维护性,如何认识这些问题以及如何达成目标。第 2 章我们比…

JQuery(四)---【使用JQuery实现动画效果】

目录 前言 一.隐藏和显示 1.1使用方法 1.2案例演示(1) 1.3隐藏/显示效果一键切换 二.淡入淡出效果 2.1使用方法 2.2案例演示(fadeIn) 2.3案例演示(fadeOut) 2.4案例演示(fadeToggle) 2.5案例演示(fadeTo) 三.滑动 3.1使用方法 3.2案例演示(slideDown) 3.3案例演示…

三道模拟题

P1003 [NOIP2011 提高组] 铺地毯 题目描述 原题点这里-->P1003 [NOIP2011 提高组] 铺地毯 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺…

黑马头条项目结构

微服务架构具有许多优点,其中一些主要优点包括: 松耦合性:每个微服务都是独立的,可以独立部署、独立扩展和独立更新,这种松耦合性使得系统更加灵活,易于维护和演化。 技术多样性:由于每个微服务…

鸿蒙开发 @ohos/hypium找不到问题

用的是最新的 开发工具 DevEco Studio 3.1.1 新建的空项目 报错 ohpm ERROR: Install failed ENOENT: no such file or directory, stat ‘E:\win\Project\MyApplication1\oh_modulesohos\hypium’ 解决方式 当前项目中 \oh_modules.ohpmohoshypium1.0.6\oh_modules 这里面有o…

算法练习第19天|222.完全二叉树的节点个数

222.完全二叉树的节点个数 222. 完全二叉树的节点个数 - 力扣(LeetCode)https://leetcode.cn/problems/count-complete-tree-nodes/description/ 题目描述: 给你一棵 完全二叉树 的根节点 root ,求出该树的节点个数。题目数据保…

SpringBoot版本配置问题与端口占用

前言 ​ 今天在配置springboot项目时遇到了一些问题,jdk版本与springboot版本不一致,在使用idea的脚手架创建项目时,idea的下载地址是spring的官方网站,这导致所下载的版本都是比较高的,而我们使用最多的jdk版本是jdk…

淘宝API接口开发系列:采集商品视频,属性,sku价格,详情图等

淘宝API接口开发是一个复杂的过程,涉及到与淘宝开放平台的对接,以及理解和使用其提供的API。如果你想采集商品视频、属性、SKU价格、详情图等信息,你需要遵循淘宝开放平台的开发者文档,并确保你的应用已经获得了适当的权限。 1.请…

关于C#程序(Windows窗体应用)的退出询问

在一般的软件中我们常常会发现当我们退出系统的时候,总会有提示 那我们来看看这个是怎么实现的: 首先单击退出按钮,进入到我们的退出按钮属性,点击闪电标志: 找到FormClosing,双击进入 进行代码写入&…

Learn SRP 02

3.Editor Rendering 3.1Drawing Legacy Shaders 因为我们的管线只支持无光照的着色过程,使用其他不同的着色过程的对象是不能被渲染的,他们被标记为不可见。尽管这是正确的,但是它还是隐藏了场景中一些使用错误着色器的对象。所以让我们来渲…

【Golang】并发编程之三大问题:原子性、有序性、可见性

目录 一、前言二、概念理解2.1 有序性2.2 原子性后果1:其它线程会读到中间态结果:后果2:修改结果被覆盖 2.3 可见性1)store buffer(FIFO)引起的类似store-load乱序现象2)store buffer(非FIFO)引起的类似store-store乱序…

代理模式(结构型模式)

目录 1、概述 2、结构 2.1、角色分类 2.2、类图 3、静态代理 3.1、案例类图 3.2、案例代码 4、JDK 动态代理 4.1、案例代码 4.2、底层原理 4.3、执行流程说明 5、CGLib 动态代理 5.1、案例代码 6、三种代理的对比 6.1、JDK代理和CGLib代理 6.2、动态代理和静态…

【Latex排版小记录】latex设置两端对齐

Latex排版的时候遇到了公式/英文过长超出来的情况 解决办法:在\begin{document}里面增加\begin{sloppypar} \begin{document} \begin{sloppypar}\end{sloppypar} \end{document}

Spring Boot - 利用MDC(Mapped Diagnostic Context)实现轻量级同步/异步日志追踪

文章目录 Pre什么是MDC(Mapped Diagnostic Context)Slf4j 和 MDC基础工程工程结构POMlogback-spring.xmlapplication.yml同步方式方式一: 拦截器自定义日志拦截器添加拦截器 方式二: 自定义注解 AOP自定义注解 TraceLog切面 测试…

Java实现优先级队列(堆)

前言 在学习完二叉树的相关知识后,我们对数据结构有了更多的认识,本文将介绍到优先级队列(堆) 1.优先级队列 1.1概念 前面介绍过队列,队列是一种先进先出(FIFO)的数据结构,但有些情况下,操作的数据可能…

【机器学习】探究Q-Learning通过学习最优策略来解决AI序列决策问题

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

学会 Python 后可以做什么副业?

近年来,Python凭借其简洁易入门的特点受到越来越多人群的青睐。 当然这不仅仅是针对程序员来说,对于一些学生、职场人士也是如此。 Python为什么会大受欢迎呢?因为Python还被大家称为“胶水语言,它适用于网站、桌面应用开发、[自…

蓝牙耳机哪个牌子好用?力荐五款实力超群机型,快收藏!

​随着蓝牙耳机的普及,越来越多的年轻人开始追求这种无线的便利。市场上品牌众多,款式多样,选择起来确实让人眼花缭乱。我整理了一份蓝牙耳机品牌排行榜前十名,希望能为你提供一些参考,帮助你找到心仪的耳机。 一、如何…

C语言堆区内存管理

一、C语言编译的内存分配 二、堆区空间的分配 1、malloc函数 功能&#xff1a;从堆区分配内存 #include <stdlib.h> void *malloc(unsigned int size)//size 分配内存的字节数2、free函数 功能&#xff1a;释放内存 #include <stdlib.h> void free(void *ptr)…