如何创建弹跳div动画

2024-03-25

我正在尝试重新创建弹跳箭头动画,如下所示:http://www.codecomputerlove.com/ http://www.codecomputerlove.com/但进展并不顺利...

我尝试使用 Layerslider 中的内置动画最接近的内容可以在这里找到:dev.themarketcreative dot com

我决定尝试用 Layerslider 解决这个问题需要很长时间,有人知道如何做到这一点吗?

我发现的最远的是:http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149但我需要它做这个动画加载和连续循环。

Thanks


纯 CSS 方式来实现这种反弹

这样做。

.bounce {
      position:fixed;
      left:50%;
      bottom:0;
      margin-top:-25px;
      margin-left:-25px;
      height:50px;
      width:50px;
      background:red;
      -webkit-animation:bounce 1s infinite;
    }
    
    @-webkit-keyframes bounce {
      0%       { bottom:5px; }
      25%, 75% { bottom:15px; }
      50%      { bottom:20px; }
      100%     {bottom:0;}
    }
<div class="bounce"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何创建弹跳div动画 的相关文章

  • History.pushState和页面刷新

    我开始研究 HTML5 新历史 API 不过 我有一个问题 如何处理页面刷新 例如 用户单击一个链接 该链接由 js 函数处理 该函数 异步加载页面内容 使用history pushState 更改URL 用户刷新页面 但是服务器上当然不存
  • 使用 Jquery 更改 css 属性时的事件检测

    有没有办法检测元素的 显示 css 属性是否更改 是否更改为无 块或内联块 如果没有的话有什么插件吗 谢谢 Note 突变事件 https developer mozilla org en US docs Web Guide Events
  • 使用 ES6 静态函数时,我得到“没有这样的方法”

    我正在尝试为我在 React Native 中工作的项目创建一个包含静态函数的 utils 类 我读到了如何在 StackOverFlow 中创建静态函数question https stackoverflow com questions
  • 单击时阻止 jquery TABS 跳跃/向上滚动?

    我使用的引擎调用 jquery tabs js 脚本来处理选项卡功能 问题是 只要选项卡位于页面顶部并且您单击链接 它们就会快速向下滚动到页面底部 我已经尝试解决这个问题几个小时了 所有解决方案都指向类似的答案 但没有一个对我有用 fn t
  • 开始使用 Three.js 中的行进立方体

    我是 Three js 的新手 正在寻找教程来帮助我开始了解如何在 Three js 中使用 Marching Cubes 到目前为止 我在 Three js 中看到的一些使用它的项目对我来说有点复杂 所以一个简单的教程会很好 谢谢 像您一
  • 元素上的框阴影行为

    Update 在我提交错误报告后 https bugs chromium org p chromium issues detail id 763337 https bugs chromium org p chromium issues de
  • 在 JavaScript 中引用 C# 变量

    我已经阅读了很多线程 但我不明白为什么这不起作用 我正在创建一个将用作导航栏的 SharePoint Web 部件 一切都很顺利 直到我尝试在 JS 代码中引用 C 变量 这是来自 VisualWebPart1UserControl asc
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 是否可以向 JavaScript 函数发送可变数量的参数?

    是否可以从数组向 JavaScript 函数发送可变数量的参数 var arr a b c var func function debug alert arguments length for arg in arguments alert
  • jquery ajax 发送到 MVC 控制器时不断收到 400(错误请求)

    我的 ajax 调用看起来像这样 ajax actually approve or reject the promotion url url type POST data data PromotionId data UserId data
  • 无法安装js-bson

    我正在使用Windows 7 64位 尝试安装bson作为mongodb的依赖项 我收到此错误 npm WARN package json email protected cdn cgi l email protection No READ
  • 如何使表格单元格的最小宽度为 3 位数字?

    如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大 现在我正在硬编码min width 但我不喜欢硬编码一个值 因为我将来可能想更改字体 如果需要Javascript也没关系 table border 1 tr td 1 td td
  • Angular - 将焦点放在动态创建的输入字段上

    我如何将焦点添加到新创建的字段 参见到目前为止的示例 http jsfiddle net aERwc 165 http jsfiddle net aERwc 165 scope addField function console log h
  • addAttr 在 jquery 中不起作用?

    我有一个示例代码
  • 将罗马数字转换为阿拉伯数字--recursiv

    我是 JavaScript 新手 正在网站的帮助下学习https www jshero net koans roman1 html https www jshero net koans roman1 html 本练习是编写一个转换器 将罗马
  • jQuery clone() 复制数据...有时...?

    使用下面的示例 我有一个tr我正在复制 它包含一个 jQueryautocomplete 第一次克隆时 自动完成功能不起作用 因为附加的data items 一片空白 第二次单击 添加 按钮时 自动完成功能将起作用 此后 再次单击 添加 会
  • FB.getLoginStatus() 不起作用

    我正在尝试编写一段代码来检查用户是否登录 发现FBJS API中有一个内置方法 叫做getLoginStatus 我已经在html中实现了它 但出于某种原因 getLoginStatus 内部的alert 不会被触发 我也尝试在 init
  • Google 折线图添加对象数组

    我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J
  • 将响应式网格布局转换为 Plotly Dash

    我是一个非常活跃的 Dash 用户 我开始发现 Dash 使用中存在很多限制 并且我意识到有关如何将组件转换为 Dash 的信息 内容绝对有限 并且示例过时且非常简单 并且我对 Javascript 或 React 几乎没有任何了解 我完全
  • ESLint 如何集成到 Create React App 中?

    当我跑步时npx create react app some name 为我创建了一个简单的 React 项目 当我随后窥视package json 似乎有一些 ESLint 存在的证据 因为有 eslintConfig extends r

随机推荐