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 ...
随机推荐
- abp 使用 hangfire结合mysql
abp 官方使用的hangfire 默认使用的是sqlserver的存储 需要引入支持mysql的类库 我这边使用的是Hangfire.MySql.Core 直接用nuget安装即可 首先按照官方文档 ...
- POJ 2421
#include<iostream> #include<stdio.h> #define MAXN 500 #define inf 100000000 using namesp ...
- BIND DNS拒绝服务漏洞 CVE-2016-2776修复
接到此漏洞之后,略微查了一下相关描述,发现漏洞影响范围很大,可能造成的影响也很严重,于是着手进行修复. 漏洞的详细信息可见如下链接: http://www.cnvd.org.cn/flaw/show/ ...
- 05-02 Java 一维数组、内存分配、数组操作
数组的定义 动态初始化 /* 数组:存储同一种数据类型的多个元素的容器. 定义格式: A:数据类型[] 数组名; B:数据类型 数组名[]; 举例: A:int[] a; 定义一个int类型的数组a变 ...
- python2和3的区别 高清大图:)
点击图片,新标签中打开查看!或右键‘图片另存为’!
- Entity framework 预热
Entity framework 预热 对于在应用程序中定义的每个DbContext类型,在首次使用时,Entity Framework都会根据数据库中的信息在内存生成一个映射视图(mapping ...
- 自测 基础 js 脚本。
<html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...
- Quartz.NET在ASP.NET 中使用
Quartz.NET 项目地址 http://quartznet.sourceforge.net/ common logging是一个通用日志接口,log4net是一个具体实现 ,也可以使用NLog, ...
- Android中实现activity的页面跳转并传值
一个Android应用程序很少会只有一个Activity对象,如何在多个Activity之间进行跳转,而且能够互相传值是一个很基本的要求. 本次我们就讲一下,Android中页面跳转以及传值的几种方式 ...
- 一口一口吃掉Hexo(五)
如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 通过前四节的内容,相信你已经能够在你的虚拟主机上成功部署网站,并且能够通过你自己的域名访问你的网站了,接下来要做的就是日 ...