两个gif图片动画效果
<div className="uploading-animation-tip-wrap">
<img src={require('~/shared/assets/image/slide-uploading-animation-file-300-300.gif')} alt="" className="uploading-tip-animation-file" />
<img src={require('~/shared/assets/image/slide-uploading-animation-progress-wave-300-300.gif')} alt="" className="uploading-tip-animation-progress" />
</div>
.uploading-animation-tip-wrap {
width: 66px;
height: 66px;
background-color: #f5f5f5;
border-radius: 50%;
position: relative;
.uploading-tip-animation-file {
width: 66px;
position: absolute;
top:;
left:;
z-index:;
}
.uploading-tip-animation-progress {
width: 66px;
position: absolute;
top:;
left:;
z-index:;
opacity: 0.2;
}
}
两个gif图片动画效果的更多相关文章
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- 多种方法实现H5网页图片动画效果;
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢?其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时间 ...
- css实现图片动画效果
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...
- 纯CSS3实现GIF图片动画效果
在线演示 本地下载
- 【转】C#窗体飞入飞出的动画效果(Api)
[System.Runtime.InteropServices.DllImport("user32")] private static extern bool AnimateWin ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- 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 ...
- [原创]实现android知乎、一览等的开场动画图片放大效果
代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...
随机推荐
- tail -f 加过滤功能
实时查看日志 通过-f参数,我们可以实时查看文件的新增内容: $ tail -f itbilu.log 注意:使用-f参数时不会中断文件监视,需要通过ctrl+c手动结束. 实时日志查看与grep过滤 ...
- JEECG Hibernate 自动更新 持久化
Hibernate不调用update却自动更新 - 七郎 - 博客园http://www.cnblogs.com/yangy608/p/4073941.html hibernate自动更新持久化类的问 ...
- lintcode 787. The Maze 、788. The Maze II 、
787. The Maze https://www.cnblogs.com/grandyang/p/6381458.html 与number of island不一样,递归的函数返回值是bool,不是 ...
- Spring的Bean的生命周期方法执行顺序测试
通过一个简单的Maven工程来演示Spring的Bean生命周期函数的执行顺序. 下面是工程的目录结构: 直接贴代码: pom.xml文件内容: <?xml version="1.0& ...
- sqllite 学习-1
C# SQLite 数据库操作学习: https://www.cnblogs.com/leemano/p/6578050.html SQLite 之 C#版 System.Data.SQLite 使用 ...
- ABAP DEMO ole示例程序
*&---------------------------------------------------------------------* *& Report YCX_021 * ...
- ABAP DEMO ALV-监听数据修改
*&---------------------------------------------------------------------* *& Report YDEMO_006 ...
- 【docker 镜像源】解决quay.io和gcr.io国内无法访问的问题
该问题容易导致image pull back off 错误,应当换源: 微软: https://yeasy.gitbooks.io/docker_practice/install/mirror.htm ...
- NB-IOT技术 UP模式 和CP模式,用户面和控制面,数据面
先看下面的图 UE就是NB-IOT设备,那么UE的数据到应用服务器有3条路可以走 第一条,UE,基站,MME,SCEF,应用服务器,这个是CP模式,也叫控制面,也叫信令无线承载面,也叫控制面承载,叫法 ...
- 解决RedisDesktopManager连接不上redis问题
linux 下安装redis很简单,在此不做赘述 发现linux上启动redis,测试redis使用正常, 但使用RedisDesktopManager却连接不上,报错如下,报错信息显示:当前使用的P ...