1. //html结构
    <div class='upImg'><div>
  1. //css
  2. .upImg {
  3. background-image: url(../images/01.png);
  4. position: fixed;
  5. background-repeat: no-repeat;
  6. background-position: center;
  7. background-size: cover;
  8. z-index: 11;
  9. width: 6.5625%;
  10. height: 0;
  11. padding-bottom: 4.063%;
  12. left: 50%;
  13. -webkit-transform: translate(-50%, 0);
  14. -ms-transform: translate(-50%, 0);
  15. transform: translate(-50%, 0);
  16. bottom: 42px;
  17. -webkit-animation: upDown_anim 2s ease-in-out infinite;
  18. animation: upDown_anim 2s ease-in-out infinite;
  19. }
  20. @-webkit-keyframes upDown_anim {
  21. 0%,
  22. 100% {
  23. -webkit-transform: translate(0, 0);
  24. transform: translate(0, 0);
  25. }
  26. 50% {
  27. -webkit-transform: translate(0, 20px);
  28. transform: translate(0, 20px);
  29. }
  30. }
  31. @keyframes upDown_anim {
  32. 0%,
  33. 100% {
  34. -webkit-transform: translate(0, 0);
  35. transform: translate(0, 0);
  36. }
  37. 50% {
  38. -webkit-transform: translate(0, 20px);
  39. transform: translate(0, 20px);
  40. }
  41. }
  1.  

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. 阿里云RDS数据库备份文件恢复到本地数据库

    参考这里:https://help.aliyun.com/knowledge_detail/41817.html 第4.2步要多注释掉一些(应该根据实际报错来注释): [mysqld] innodb_ ...

  2. Go指南练习 rot13Reader

    题目: 练习:rot13Reader 有种常见的模式是一个 io.Reader 包装另一个 io.Reader,然后通过某种方式修改其数据流. 例如,gzip.NewReader 函数接受一个 io. ...

  3. 深入理解java虚拟机读书笔记--java内存区域和管理

    第二章:Java内存区域和内存溢出异常 2.2运行时数据区域 运行时数据区分为方法区,堆,虚拟机栈,本地方法栈,程序计数器 方法区和堆是线程共享的区域 虚拟机栈,本地方法栈,程序计数器是数据隔离的数据 ...

  4. C++类和对象(一)&&实现offsetof宏&&this指针

    一.目录 1.对象的相关知识 2.类的定义 3.类的实例化 4.类对象模型 5.模拟实现offsetof宏 6.this指针 二.正文 1.对象的相关知识 C语言是面向过程的,关注的是过程,分析求解问 ...

  5. TypeScript设计模式之装饰、代理

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  6. 深入理解SpringCloud之Eureka注册过程分析

    eureka是一种去中心化的服务治理应用,其显著特点是既可以作为服务端又可以作为服务向自己配置的地址进行注册.那么这篇文章就来探讨一下eureka的注册流程. 一.Eureka的服务端 eureka的 ...

  7. PHP-引入文件(include)后,页面错位,不居中解决办法

    1.把include文件放在head里,不要放在html或doctype上面,这样可以解决居中的问题,空白行的话可以用<div style="display:none"> ...

  8. 轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  9. 32-hadoop-hbase调优

    1, 数据膨胀后, 才对region进行分区, 效率比较低, 所以需要预创建region, 进行负载均衡写入 package com.wenbronk.hbase; import org.apache ...

  10. linux上搭建ftp、vsftp, 解决访问ftp超时连接, 解决用户指定访问其根目录,解决ftp主动连接、被动连接的问题

    linux上搭建ftp 重要 解决如何搭建ftp         解决用户指定访问其根目录         解决访问ftp超时连接         解决ftp主动连接.被动连接的问题 1.安装ftp ...