微信扫码显示特效:

下面是实际效果:(可以自己移动鼠标,尝试效果)

(由于篇幅长度,没有加兼容性前缀,演示环境为谷歌浏览器。)

现在就一个一个效果单独演示:

演示demo的HTML内容为:

  1. <div class="moyu">魔芋</div>

CSS:

  1. div {
  2. width:200px;
  3. height:200px;
  4. background: red;
  5. margin:50px;
  6.         color:#fff;
  7. line-height:200px;
  8. font-size:30px;
  9. text-align:center;
  10. }

淡入:(改变透明度)

  1. .moyu {
  2. -webkit-animation: change 2s ease;
  3. animation: change 2s ease;
  4. }
  5. @-webkit-keyframes change {
  6. 0%{
  7. opacity:0;
  8. }
  9. 100%{
  10. opacity:1;
  11. }
  12. }
  13. @keyframes change {
  14. 0%{
  15. opacity:0;
  16. }
  17. 100%{
  18. opacity:1;
  19. }
  20. }

效果:

淡出就是调整opacity从1到0.

淡入-从下

说明:就是加是transform 的translate

  1. .moyu {
  2. -webkit-animation: change 2s ease infinite;
  3. animation: change 2s ease infinite;
  4. }
  5. @-webkit-keyframes change {
  6. 0%{
  7. opacity:0;
  8. -webkit-transform:translateY(-100px);
  9. transform:translateY(-100px);
  10. }
  11. 100%{
  12. opacity:1;
  13. -webkit-transform:translateY(0px);
  14. transform:translateY(0px);
  15. }
  16. }
  17. @keyframes change {
  18. 0%{
  19. opacity:0;
  20. -webkit-transform:translateY(-100px);
  21. transform:translateY(-100px);
  22. }
  23. 100%{
  24. opacity:1;
  25. -webkit-transform:translateY(0px);
  26. transform:translateY(0px);
  27. }
  28. }

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

弹跳

改变transform:translateY的值

  1. @-webkit-keyframes change {
  2. 0%,
  3. 20%,
  4. 50%,
  5. 80%,
  6. 100%{
  7. -webkit-transform: translateY(0);
  8. }
  9. 40%{
  10. -webkit-transform: translateY(-30px);
  11. }
  12. 60%{
  13. -webkit-transform: translateY(-15px);
  14. }
  15. }

弹入

透明度结合transform:scale

  1. @-webkit-keyframes change {
  2. 0%{
  3. opacity:0;
  4. -webkit-transform: scale(0.3);
  5. }
  6. 50%{
  7. opacity:1;
  8. -webkit-transform: scale(1.05);
  9. }
  10. 70%{
  11. -webkit-transform: scale(0.9);
  12. }
  13. 100%{
  14. -webkit-transform: scale(1);
  15. }
  16. }

转入

  1. @-webkit-keyframes change {
  2. 0%{
  3. opacity:0;
  4. -webkit-transform: rotate(-200deg);
  5. }
  6. 100%{
  7. opacity:1;
  8. -webkit-transform: rotate(0);
  9. }
  10. }

翻转

  1. @keyframes change {
  2. 0%{
  3. transform: perspective(400px) rotateY(0);
  4. animation-timing-function: ease-out;
  5. }
  6. 40%{
  7. transform: perspective(400px) translateZ(150px) rotateY(170deg);
  8. animation-timing-function: ease-out;
  9. }
  10. 80%{
  11. transform: perspective(400px) rotateY(360deg) scale(0.95);
  12. animation-timing-function: ease-in;
  13. }
  14. 100%{
  15. transform: perspective(400px) scale(1);
  16. animation-timing-function: ease-in;
  17. }
  18. }

闪烁

  1. @keyframes change {
  2. 0%,
  3. 50%,
  4. 100%{
  5. opacity:1;
  6. }
  7. 25%,
  8. 75%{
  9. opacity:0;
  10. }
  11. }

震颤

  1. @keyframes change{
  2. 0%,
  3. 100%{
  4. transform: translateX(0);
  5. }
  6. 10%,
  7. 30%,
  8. 50%,
  9. 70%,
  10. 90%{
  11. transform: translateX(-10px);
  12. }
  13. 20%,
  14. 40%,
  15. 60%,
  16. 80%{
  17. transform: translateX(10px);
  18. }
  19. }

摇摆:

  1. @keyframes change{
  2. 20%{
  3. transform: rotate(15deg);
  4. }
  5. 40%{
  6. transform: rotate(-10deg);
  7. }
  8. 60%{
  9. transform: rotate(5deg);
  10. }
  11. 80%{
  12. transform: rotate(-5deg);
  13. }
  14. 100%{
  15. transform: rotate(0);
  16. }
  17. }

摇晃:

  1. @keyframes change{
  2. 0%{
  3. transform: translateX(0);
  4. }
  5. 15%{
  6. transform: translateX(-100px) rotate(-5deg);
  7. }
  8. 30%{
  9. transform: translateX(80px) rotate(3deg);
  10. }
  11. 45%{
  12. transform: translateX(-65px) rotate(-3deg);
  13. }
  14. 60%{
  15. transform: translateX(40px) rotate(2deg);
  16. }
  17. 75%{
  18. transform: translateX(-20px) rotate(-1deg);
  19. }
  20. 100%{
  21. transform: translateX(0);
  22. }
  23. }

响铃:

  1. @keyframes change {
  2. 0%{
  3. transform: scale(1);
  4. }
  5. 10%,
  6. 20%{
  7. transform: scale(0.9) rotate(-3deg);
  8. }
  9. 30%,
  10. 50%,
  11. 70%,
  12. 90%{
  13. transform: scale(1.1) rotate(3deg);
  14. }
  15. 40%,
  16. 60%,
  17. 80%{
  18. transform: scale(1.1) rotate(-3deg);
  19. }
  20. 100%{
  21. transform: scale(1) rotate(0);
  22. }
  23. }

**

时间: 2024-10-06 00:31:13

微信扫码显示特效:的相关文章

C#开发微信门户及应用(45)--微信扫码登录

在前面随笔<C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理>介绍了基于微信开放平台接口实现的微信扫码直接登录的过程.本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实际项目中. 1.扫码登录配置处理 在我前面的随笔扫码登录处理中,介绍了账号登陆和扫码登录并存的情况,有时候我们可能想只是允许用户扫码登录即可,也就是不需要账号登陆,这种情况我们可以通过进行配置实现处理.例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果.也就是我们可以根据配置,因此其他登

Web应用多账号系统设计及微信扫码登录实现

Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内部人员使用 部署在公网 基于如上特点,显然让公司的人为这样一个内部系统而实现一个完整的账号不太现实,要兼顾隐私性和便捷性的需求,作者想到了使用微信扫码登录来做为身份认证,然后后台管理员审核,这样就可以达到如下的效果: 可以实现无门槛注册(微信扫一扫就完成注册),保证了便捷性 系统对未审核通过的人员进

PC 端微信扫码注册和登录

一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二.寻找解决方案 按传统的方式

(转)微信扫码登录网页实现原理

扫码登录操作过程 浏览器输入:https://wx.qq.com/?lang=zh_CN 手机登录微信,利用“扫一扫”功能扫描网页上的二维码 手机扫描成功后,提示“登录网页版微信”:网页上显示“成功扫描 请在手机点击确认以登录” 手机端点击“登录网页版微信”,网页跳转到用户的微信操作界面 整个扫码登录的操作过程还是挺简单的,而且交互地实时性比较好,如果网络不是非常阻塞,整个过程还是非常快的. 扫码登录原理 扫码登录大概的思路是:微信手机客户端从网页二维码里面得到一些信息,然后发送给网页微信的服务

微信扫码登录

一.微信官方参考文档地址: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN 首先你需要在微信开放平台申请一个微信网站应用,获取 AppID:aaaaaaaaabbcc AppSecret: sfasfsafsafsafsads 二.jsp页面代码 <%@

pc端微信扫码支付和支付宝在线支付(还未验证 先留着)

本DEMO演示了PHP支付宝和微信扫码在线支付,支付成功后,在回调地址显示支付相关信息. 操作步骤: 1.修改配置文件 Application/common/conf/config.php $arr = array(     'DB_TYPE' => 'mysql',     'DB_HOST' => "localhost",     'DB_NAME' => 'demo',     'DB_USER' => "sucaihuo.com", 

Net MVC微信扫码支付

微信扫码支付+Asp.Net MVC 这里的扫码支付指的是PC网站上面使用微信支付,也就是官方的模式二,网站是Asp.net MVC,整理如下. 一.准备工作 使用的微信API中的统一下单方法,关键的参数是‘公众账号ID(appid)’,‘商户号(mch_id)’和’商户支付密钥(KEY)‘,所以首先要有一个审核过的公众号,并开通支付功能,然后申请商户,通过审核后得到商户号,也就是商户平台的登录名.商户支付密钥是用来签名的,确保url不被篡改.进入商户平台后在API安全中设置,是一个32位的字符

java微信扫码支付(模式二)

微信扫码支付——模式二 代码: PayCommonUtil.java  微信支付常用方法 1 import java.text.SimpleDateFormat; 2 import java.util.Date; 3 import java.util.Iterator; 4 import java.util.Map; 5 import java.util.Set; 6 import java.util.SortedMap; 7 8 public class PayCommonUtil 9 { 1

ThinkPHP5微信扫码支付

1.把微信官网下载的demo放在根目录/vendor/目录下,这里我的是/vendor/wxpay_pc目录 2.把cert里面的文件替换成自己项目的证书(登陆微信商户平台,账户中心,API安全下载) 3.把/wxpay_pc/lib目录下的WxPay.Config.php文件里的信息改成自己的信息,只需改以下四个就行: 3.把example/目录下的notify.php改名为PayNotifyCallBack.php  不改也没事,我是为了和该文件里的类名保持一致 4.把里面require_o