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 ...
随机推荐
- js变量提升
JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部: 'use strict'; function foo() { var x = 'Hello, ...
- redmine设置user projects时无法delete的处理方法
对于user,当要在管理员界面处理其projects权限时,发现部分项目只有edit按钮,而部分项目还有一个delete按钮. “delete”,直接点击按钮即可删除对应project权限,表明该pr ...
- 查看MySQL 表结构
前言:最近在实习中,做到跟MySQL相关的开发时,想起了好久前的一个笔试题——查看数据库表结构有哪几种方法: (一)使用DESCRIBE语句 DESCRIBE table_name; 或DESC ta ...
- 使用binlog2sql针对mysql进行数据恢复
MySQL闪回原理与实战 DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法 ...
- 如何用ajax下载文件
引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...
- 工具-CrashMonkey4IOS,Monkey测试方案
在TesterHome看到了CrashMonkey4IOS,顿时觉得之前用instrument在做monkey测试,非常的弱智!crash后啥都看不到,无crashlog,无crash步骤,并且也不能 ...
- HashMap:JDK7 与 JDK8 的实现
JDK7中的HashMap HashMap底层维护一个数组,数组中的每一项都是一个Entry: transient Entry<K,V>[] table; 我们向在HashMap 中存放的 ...
- golang实现unicode码和中文之间的转换
将中文转换为unicode码,使用golang中的strconv包中的QuoteToASCII直接进行转换,将unicode码转换为中文就比较麻烦一点,先对unicode编码按\u进行分割,然后使用s ...
- Javascript权威指南阅读笔记--第3章类型、值和变量(1)
之前一直有个想法,好好读完JS权威指南,便于自己对于JS有个较为全面的了解.毕竟本人非计算机专业出生,虽然做着相关行业的工作,但总觉得对于基础的掌握并没有相关专业学者扎实,正好因为辞职待业等原因,还是 ...
- SpringMVC之使用 @RequestMapping 映射请求
@RequestMapping注解 SpringMVC使用该注解让控制器知道可以处理哪些请求路径的,除了可以修饰方法,还可以修饰在类上. – 类定义处:提供初步的请求映射信息.相对于 WEB 应用的根 ...