如何创建弹跳 div 动画
Posted
技术标签:
【中文标题】如何创建弹跳 div 动画【英文标题】：How to create bouncing div animation 【发布时间】：2014-06-02 21:23:18 【问题描述】：我正在尝试重新创建弹跳箭头动画，例如：http://www.codecomputerlove.com/，但进展不顺利...
我在 Layerslider 中尝试使用内置动画的最接近的方法可在此处获得：dev.themarketcreative dot com
我决定用 Layerslider 解决这个问题需要很长时间，有人知道怎么做吗？
我发现的最远的是：http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149，但我需要它在加载和连续循环中执行此动画。
谢谢
【问题讨论】：
请给我们看一些代码 【参考方案1】：纯 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>【讨论】：
太棒了，总是喜欢使用 CSS 选项。你是明星！ 这个 css 只适用于 webkit 浏览器。您需要添加-moz-、-o-、-ms- 使其在mozila、opera 和ie 10 浏览器上运行。.. 我应该提到 codepen 链接到损坏的代码。只需看看下面的@RAJ 答案。还应该注意，没有轴的箭头并不是真正的箭头。它只是一个尖括号。 @MiloLaMar 对不起.. 是的，我错误地删除了该链接。如果你愿意，我会宣传一个新的。 我实际上在到达这里之前看到了一个我通过谷歌找到的。下面的内联示例仍然有效，因此无需添加新示例。【参考方案2】：body
background: black;
.arrow
position: fixed;
bottom: 0;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
.bounce
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce
0%, 20%, 50%, 80%, 100%
-webkit-transform: translateY(0);
40%
-webkit-transform: translateY(-30px);
60%
-webkit-transform: translateY(-15px);
@-moz-keyframes bounce
0%, 20%, 50%, 80%, 100%
-moz-transform: translateY(0);
40%
-moz-transform: translateY(-30px);
60%
-moz-transform: translateY(-15px);
@keyframes bounce
0%, 20%, 50%, 80%, 100%
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
40%
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
60%
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); <body>
<div class="arrow bounce">
</div>
</body>【讨论】：
很好的内联演示答案 RAJ :) 不知道 SO 实现了这个。 当它弹起时，我一直在发出嗡嗡声。不错的解决方案！【参考方案3】：您可以使用CSS 逐帧手动完成，也可以使用SCSS 自动完成，并进行一些数学运算和迭代。
body overflow:hidden;
.ball
--size: 50px;
--bounceHeight: 120px;
--duration: .4s;
width: var(--size);
height: var(--size);
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
perspective: 1000px;
/* bouncing */
.ball::before
content: '';
display: block;
width: inherit;
height: inherit;
background: radial-gradient(ellipse at 30% 20%, LightSalmon, transparent 40%),
radial-gradient(circle at -20% -30%, tomato 60%, darkred);
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.1) inset;
animation: bounce var(--duration) infinite alternate cubic-bezier(1,0,.8,.9);
/* shadow */
.ball::after
content: '';
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
right: 0;
display: block;
width: inherit;
height: 20%;
color: #CCC;
background-color: currentColor;
border-radius: 50%;
transform: translateY(var(--bounceHeight)) scale(.8);
animation: bounceShadow var(--duration) infinite alternate cubic-bezier(1,0,.8,.9);
@keyframes bounce
85% transform: translateY(calc(var(--bounceHeight) - 3px));
86% transform: translateY(calc(var(--bounceHeight) - 3px)) scale(1.1, .9);
100% transform: translateY(var(--bounceHeight)) scale(1.4, .5);
@keyframes bounceShadow
0% box-shadow: 0 0 10px 8px currentColor; color:#EEE;
90% box-shadow: 0 0 3px 3px currentColor;
91% box-shadow: 0 0 2px 2px currentColor;
100% box-shadow: 0 0 0px currentColor;
<div class="ball"></div>【讨论】：
【参考方案4】：可以用纯css来解决。
.image
margin-top: 50px;
width: 50px;
height: 50px;
background-color: gold;
border: 1px solid #999;
animation: bounce 5s infinite alternate;
-webkit-animation: bounce 5s infinite alternate;
@keyframes bounce
from
transform: translateY(0px);
to
transform: translateY(-55px);
@-webkit-keyframes image
from
transform: translateY(0px);
to
transform: translateY(-55px);
<div class="image"></div>【讨论】：
【参考方案5】：使用以下
<html lang="en">
<head>
<style>
p
background-color:#bca;
width:200px;
border:1px solid green;
div width:100px;
height:100px;
background:red;
</style>
<script src="http://www.tutorialspoint.com/jquery/jquery-1.3.2.min.js"></script>
<script src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<title>Birman Cats</title>
</head>
<body>
<p>Click the button</p>
<button id="button"> Bounce </button>
<div class="target">
</div>
<script>
$(document).ready(function()
$(".target").effect( "bounce",
times:3, 300 );
function bouncee()
$(".target").effect( "bounce",times:3, 300 );
setTimeout(bouncee(),1000);
setTimeout(bouncee(),1000);
);
</script>
</body>
</html>
【讨论】：
【参考方案6】：使用您提供的相同代码，只需将此 js 代码替换为 javascript。
$(document).ready(function()
function doAnimation()
$(".target").effect( "bounce", times:3, 300, doAnimation);
doAnimation();
);
</script>
【讨论】：
效果很好，但选择了 CSS 选项。非常感谢。【参考方案7】：no
.trnas
margin-top: 50px;
width: 50px;
height: 50px;
background-color: gold;
border: 1px solid #999;
animation: bounce 5s infinite alternate;
-webkit-animation: bounce 5s infinite alternate;
@keyframes bounce
from
transform: translateY(0px);
to
transform: translateY(-55px);
@-webkit-keyframes image
from
transform: translateY(0px);
to
transform: translateY(-55px);
<div class="trnas"></div>
【讨论】：
始终为您的答案提供描述以及它将如何解决问题。以上是关于如何创建弹跳 div 动画的主要内容，如果未能解决你的问题，请参考以下文章