h5向上翻页图标晃动动画,css固定h5向上翻页图标在页面上
//html结构
<div class='upImg'><div>
//css
.upImg {
background-image: url(../images/01.png);
position: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 11;
width: 6.5625%;
height: 0;
padding-bottom: 4.063%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: 42px;
-webkit-animation: upDown_anim 2s ease-in-out infinite;
animation: upDown_anim 2s ease-in-out infinite;
}
@-webkit-keyframes upDown_anim {
0%,
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 20px);
transform: translate(0, 20px);
}
}
@keyframes upDown_anim {
0%,
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(0, 20px);
transform: translate(0, 20px);
}
}
h5向上翻页图标晃动动画,css固定h5向上翻页图标在页面上的更多相关文章
- DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画(二)
经过大神指导,上面封装的还不够全面,触摸事件应该也放进自定义中去,那么问题来了,怎么区分呢!,这就涉及到了自定义属性的介绍了 我通过设置属性来判断在onTouch事件中应该进行什么操作,接下来看看改良 ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- 多屏复杂动画CSS技巧三则(转载)
本文转载自: 经验分享:多屏复杂动画CSS技巧三则
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- Android应用图标微技巧,8.0系统中应用图标的适配
现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了.三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统,紧接着小米.华为.OV等国产手机厂商即将推出的 ...
- 项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标
Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...
- 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...
随机推荐
- javascript之快速排序
快速排序思想其实还是挺简单的,分三步走: 1.在数组中找到基准点,其他数与之比较. 2.建立两个数组,小于基准点的数存储在左边数组,大于基准点的数存储在右边数组. 3.拼接数组,然后左边数组与右边数组 ...
- 使用bash echo 输出回车转义
输出回车 [root@~]# echo -e 'hello\n'hello 回车去掉 [root@~]# echo -n hello hello[root@~]#
- [原创]K8一句话密码爆破工具{秒破10万} 支持ASP/PHP/ASPX/JSP/CFM/DIY
工具: K8_FuckOneShell 20161224编译: VS2012 C# (.NET Framework v4.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http ...
- 【spring揭秘】1、关于IOC的基础概念
1.基础概念 IOC有三种注入方式: 1.构造方法注入,就是通过构造方法进行实例化成员属性对象,优点是实现对象之后直接就可以使用,但是参数过多也是个麻烦 2.setter方法注入,实现相应的sette ...
- Flask-Restful详解
Restful API规范 restful api是用于在前端与后台进行通信的一套规范.使用这个规范可以让前后端开发变得更加轻松.以下将讨论这套规范的一些设计细节. 协议: 采用http或者https ...
- .NET跨平台实践:再谈用C#开发Linux守护进程 — 完整篇
Linux守护进程是Linux的后台服务进程,相当于Windows服务,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是为了开发守护进程,还可以拓展 ...
- tensorflow学习总结之reduce_sum函数
tensorflow里面集成了许多基于统计的数学函数,类似于reduce_sum,reduce_mean,reduce_min,reduce_max,等,根据字面意思分别是求和,求平均,求最大,求最小 ...
- C# 多线程六之Task(任务)三之任务工厂
1.知识回顾,简要概述 前面两篇关于Task的随笔,C# 多线程五之Task(任务)一 和 C# 多线程六之Task(任务)二,介绍了关于Task的一些基本的用法,以及一些使用的要点,如果都看懂了,本 ...
- 全网最详细的Xshell或SecureCRT下spark-shell里出现无法退格或者删除的问题现象的解决办法(图文详解)
不多说,直接上干货! 前言 打开spark的命令行后,发现输错字符了,但是无法退格或者删除,这是比较苦恼的问题. 这个问题,得看你是用Xshell,还是SecureCRT. 一般是出现在SecureC ...
- 大整数相加 a+b 的c语言实现
终于来到我所期盼的高精度整数相加的题目了.这个题很经典,也算是一个很好的算法入门题吧. 如果是java的话,系统类库已经内置了BigInteger类,直接调用就可以很轻易地解决了.但是学习c的编写也是 ...