1. <div className="uploading-animation-tip-wrap">
  2. <img src={require('~/shared/assets/image/slide-uploading-animation-file-300-300.gif')} alt="" className="uploading-tip-animation-file" />
  3. <img src={require('~/shared/assets/image/slide-uploading-animation-progress-wave-300-300.gif')} alt="" className="uploading-tip-animation-progress" />
  4. </div>
  1. .uploading-animation-tip-wrap {
  2. width: 66px;
  3. height: 66px;
  4. background-color: #f5f5f5;
  5. border-radius: 50%;
  6. position: relative;
  7.  
  8. .uploading-tip-animation-file {
  9. width: 66px;
  10. position: absolute;
  11. top:;
  12. left:;
  13. z-index:;
  14. }
  15. .uploading-tip-animation-progress {
  16. width: 66px;
  17. position: absolute;
  18. top:;
  19. left:;
  20. z-index:;
  21. opacity: 0.2;
  22. }
  23. }

两个gif图片动画效果的更多相关文章

  1. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  2. 多种方法实现H5网页图片动画效果;

    在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢?其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时间 ...

  3. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

  4. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

  5. 【转】C#窗体飞入飞出的动画效果(Api)

    [System.Runtime.InteropServices.DllImport("user32")] private static extern bool AnimateWin ...

  6. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  7. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  8. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. [原创]实现android知乎、一览等的开场动画图片放大效果

    代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...

随机推荐

  1. rockchip 硬解码相关

    http://opensource.rock-chips.com/wiki_Mpp MPP You can get mpp source from git. git clone -b release ...

  2. 我大概知道他在说什么了,是对内存单元的竞争访问吧。Python有GIL,在执行伪码时是原子的。但是伪码之间不保证原子性。 UDP丢包,你是不是做了盲发?没有拥塞控制的情况下,确实会出现丢包严重的情况。你先看看发送速率,还有是否带有拥塞控制。

    我大概知道他在说什么了,是对内存单元的竞争访问吧.Python有GIL,在执行伪码时是原子的.但是伪码之间不保证原子性.   UDP丢包,你是不是做了盲发?没有拥塞控制的情况下,确实会出现丢包严重的情 ...

  3. 小D课堂 - 零基础入门SpringBoot2.X到实战_第2节 SpringBoot接口Http协议开发实战_6、SpringBoot2.xHTTP请求配置讲解

    1.SpringBoot2.xHTTP请求配置讲解 简介:SpringBoot2.xHTTP请求注解讲解和简化注解配置技巧 1.@RestController and @RequestMapping是 ...

  4. 在mac中安装tmux

    在mac 中安装Tmux: 在终端输入如下命令: brew  install tmux Tmux 的快捷键前缀(Prefix) 为了使自身的快捷键和其他软件的快捷键互不干扰,Tmux 提供了一个快捷键 ...

  5. 在shell中判断hive查询记录数大小

     用途: 根据查询到结果数量来判断,是否需要再执行下个脚本. 1. 查询语句script.q脚本如下: ) as count from test; 2. shell脚本如下: 这里注意hive语句需要 ...

  6. flutter 页面布局 Paddiing Row Column Expanded 组件

    Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...

  7. 2018 遇到selenium.common.exceptions.WebDriverException问题

    selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PAT ...

  8. 1. Tomcat之startup.sh

    #判断操作系统os400=falsecase "`uname`" inOS400*) os400=true;;esac # 取脚本名称PRG="$0" # 判断 ...

  9. 我非要捅穿这 Neutron(二)上层资源模型篇

    目录 文章目录 目录 Neutron 的资源模型 Network 运营商网络和租户网络 创建运营商网络 创建租户网络 创建外部网络 Network 小结 Subnet IP 核心网络服务 Subnet ...

  10. 使用navicat的坑

    小黄人发送数据,测试软件是否将数据存入mysql数据库中,使用的是navicat. 首先截断了表,所有数据清零,但是此时表并没有回到第一页[由于前面查看最新数据,已经翻到了最后一页],然后小黄人发数据 ...