OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果


分享到


分类 编程技巧   关键字 Html5   发布 ourjs  1527906827498
注意 转载须保留原文链接,译文链接,作者译者等信息。  
有时侯页面很长,需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。

HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标。

<a href="#" class="scroll-down">
  <span> <i class="glyphicon glyphicon-chevron-down"></i> </span>
</a>


CSS: 添加动画效果

/*向下滑动的动画效果*/
@-webkit-keyframes drop {
  0%   { top:0px;  opacity: 0;}
  30%  { top:10px; opacity: 1;}
  100% { top:25px; opacity: 0;}
}
@keyframes drop {
  0%   { top:0px;  opacity: 0;}
  30%  { top:10px; opacity: 1;}
  100% { top:25px; opacity: 0;}
}

/*应用动画,添加按钮效果*/
.scroll-down {
    border: 2px solid #bbb;
    border-radius: 50%;
    margin: 0 auto;
    height: 50px;
    width: 50px;
    display: block;
    text-align: center;
    z-index: 10;
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}
.scroll-down span {
    position: relative;
    color: #bbb;
    font-size: 24px;
    -webkit-animation-name: drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: drop;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

社区评论 ( Beta版 )
  • #0 己删除 1528198064973
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 怎样使用OnceAir搭建局域网内的文件共享服务器
  2. 怎样将Android手机中的照片和视频,通过APP自动同步备份到OnceAir云盘的共享目录中
  3. nodejs视频教程集合附带源码和笔记
  4. html5弹出式网页mp4视频播放器
  5. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  6. JS动态滑动切换到页面指定位置
  7. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 编程技巧
  1. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  2. 用css禁用input、checkbox、select等html控件,实现disable效果
  3. 让Select选择框可编辑可输入可自动补全可下拉选择
  4. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  5. Node.js框架之express
  6. 纽约时报使用Html5 WebRTC记录访问者IP地址
  7. 在Debian/Ubuntu上面安装升级nginx到最新版
  8. 编写高性能HTML网页应用
  9. 在Debian(Respberry PI)上安装FTP服务器
  10. 使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常

 关键字 - Html5
  1. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  2. 用纯CSS实现的箭头
  3. 让Select选择框可编辑可输入可自动补全可下拉选择
  4. 创造canvas的艺术
  5. HTML5的TCP和UDP Web Socket API草案定稿
  6. 传统广告与H5广告的差别在哪里?
  7. WeMall微信商城源码插件代金券部分代码
  8. WeMall微信商城源码插件会员卡代码详情
  9. WeMall微信商城源码插件大转盘代码详情
  10. 你应该使用HTML5的header和footer标签吗?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号