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 ...
随机推荐
- 基于alpine用dockerfile创建的tomcat镜像
1.下载alpine镜像 [root@docker43 ~]# docker pull alpine Using default tag: latest Trying to pull reposito ...
- Android之混淆心得与亲身体验
project.properties 中设置 proguard.config=proguard-project.txt proguard-project.txt 中设置 -optimizationp ...
- Android入门学习总结
1.Manifest.xml是程序运行时读取的文件,是核心的配置文件:也是从中读取Activity 2.主要的代码文件存放在MainActivity.java,里面固定会有onCreate函数会通过s ...
- discuz 文件模板edit
1.修改title Power by discuz! 位置:template/default/common --->header_common.htm 2.discuz.htm 文件路径(修 ...
- C#基础篇十小练习
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P03练 ...
- Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO
要求 必备知识 本文要求基本了解 Html/CSS, JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载 测试预 ...
- Linux 数据重定向
名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...
- 深入理解java中HelloWorld的执行流程
HelloWorld.java是我们学习java的第一个程序,简单的再也不能简单了,可是里面的原理以及执行流程大家都知道吗?最近在复习java知识,特地钻研了一番分享给大家! 贴出HelloWorld ...
- setup&hold
setup time:建立时间,也就是在时钟上升沿到来前,数据需要稳定的时间.hold time:保持时间,指的是在时钟上升沿到来后,数据还需要保持的时间.实际上设置setup time和hold t ...
- 一篇你看了就懂的DNS详解
DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住IP. 通过域名,最终得到该域名对应的IP地址 ...