//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向上翻页图标在页面上的更多相关文章

  1. DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画(二)

    经过大神指导,上面封装的还不够全面,触摸事件应该也放进自定义中去,那么问题来了,怎么区分呢!,这就涉及到了自定义属性的介绍了 我通过设置属性来判断在onTouch事件中应该进行什么操作,接下来看看改良 ...

  2. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  3. amazeui学习笔记--css(常用组件6)--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  4. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  5. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  6. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  7. Android应用图标微技巧,8.0系统中应用图标的适配

    现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了.三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统,紧接着小米.华为.OV等国产手机厂商即将推出的 ...

  8. 项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标

    Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...

  9. 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标

    uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...

随机推荐

  1. .gitignore总结

    git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源.最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:

  2. 检查iOS项目中是否使用了IDFA

    (1)什么是IDFA 关于IDFA,在提交应用到App Store时,iTunes Connect有如下说明:   这里说到检查项目中是否包含IDFA,那如何来对iOS项目(包括第三方SDK)检查是否 ...

  3. android电量优化 总结

    移动设备电池容量小,耗电较快(基本一天一充) ,故我们在应用开发使用相关组件和方法时候必须考虑耗电情况: 一   通过Battery Historian查看手机的耗电状况, 可以知道Android的在 ...

  4. Feign status 400 reading 问题分析

    背景:项目使用的是微服务架构,采用springboot来开发,所有的服务都是基于内嵌tomcat来运行 问题:项目部署到测试环境之后,偶尔在后台日志会看到这样的日志:Feign status 400 ...

  5. 推荐一个 MYSQL 的命令行的客户端 MYCLI

    MYCLI 是一个 MySQL 命令行客户端工具 , 可以实现自动补全(auto-completion)和语法高亮,平时测试环境维护一些数据还是蛮方便的. https://github.com/dbc ...

  6. Quartz.NET在ASP.NET 中使用

    Quartz.NET 项目地址 http://quartznet.sourceforge.net/ common logging是一个通用日志接口,log4net是一个具体实现 ,也可以使用NLog, ...

  7. Python基础之白话说函数

    转自白月黑羽Python3教程之函数:http://www.python3.vip/doc/tutorial/python/0005/ 什么是函数 人类语言里面,我们不仅会给人和物起名字, 比如 小张 ...

  8. Ubuntu下安装qq方法及疑难问题解决

    在Ubuntu下安装qq有两种方法:.tar.gz包安装和.deb包安装下载地址:http://im.qq.com/qq/linux/download.shtml 方法一:.tar.gz包安装法 .t ...

  9. 【IT笔试面试题整理】字符串转数组+数组转字符串

    [试题描述]定义一个函数,字符串转数组数组转字符串 [参考代码] public static int strToInt(String str) { int i = 0, num = 0; char[] ...

  10. [机器学习] 训练集(train set) 验证集(validation set) 测试集(test set)

    在有监督(supervise)的机器学习中,数据集常被分成2~3个即: 训练集(train set) 验证集(validation set) 测试集(test set) 一般需要将样本分成独立的三部分 ...