CSS3弹跳的小球动画

最新推荐文章于 2026-05-10 06:28:38 发布
原创 最新推荐文章于 2026-05-10 06:28:38 发布 · 473 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css3
本文展示了如何利用CSS3的动画属性和关键帧实现弹跳小球的效果。通过设置不同的位移、旋转和缩放动画，使得三个小球在页面上呈现出连续的动态效果。

CSS3弹跳的小球动画

<style>

*{

margin: 0;

padding: 0;

list-style: none;

}

html,body{

width: 100%;

height: 100%;

}

body{

min-height: 100vh;

background-color: #eee;

color: #fff;

}

.container{

width: 580px;

height: 143px;

/* outline: 1px dashed red; */

/* 绝对定位 */

/* 使用这种写法，也可以让 一个容器 水平，垂直 居中显示 */

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

}

.container .ball{

/* 浮动 */

float: left;

margin-right: 50px;

}

/* :last-of-type 序选择器  ---表示容器中的最后一个元素 */

.container .ball:last-of-type{

margin-right: 0;

}

.container .ball img{

width: 160px;

}

/* 给三个小盒子，添加 定位，让他们 最初  “出现在哪里”----这个地方的定位，

       和布局没有关系，和你要做的 弹跳的 位置 有关系！！ */

.ball{

position: absolute;

top: 0;

left: 50%;

margin-left: -80px;

}


 

/* css3中的动画序列（排列动画）---给一个元素身上，添加多个动画效果 */

.ball1{

/* 动画

           tiao1 动画名称

           0.5s  动画完成时间

           ease-in 速度

           1 动画执行的次数

           forwards 动画执行到最后一帧停止

           */

/* tiao2 0.2s ease-out 0.5s 1 forwards  其中， 0.5s动画延迟时间，表示 时间到0.5秒的时候，再执行tiao2这个动画 */

/*

               

           */

animation: tiao1 0.5s ease-in 1 forwards,

tiao2 0.2s ease-out 0.5s 1 forwards,

tiao3 0.2s ease-out 0.7s 1 forwards,

tiao4 0.15s ease-out 0.9s 1 forwards,

tiao5 0.15s ease-in 1.05s 1 forwards,

leftMove 0.4s ease-out 1.2s 1 forwards;

}

.ball2{

animation: tiao1 0.5s ease-in 1 forwards,

tiao2 0.2s ease-out 0.5s 1 forwards,

tiao3 0.2s ease-out 0.7s 1 forwards,

tiao4 0.15s ease-out 0.9s 1 forwards,

tiao5 0.15s ease-in 1.05s 1 forwards,

middle 0.4s ease-out 1.2s 1 forwards;

}

.ball3{

animation: tiao1 0.5s ease-in 1 forwards,

tiao2 0.2s ease-out 0.5s 1 forwards,

tiao3 0.2s ease-out 0.7s 1 forwards,

tiao4 0.15s ease-out 0.9s 1 forwards,

tiao5 0.15s ease-in 1.05s 1 forwards,

rightMove 0.4s ease-out 1.2s 1 forwards;

}

@keyframes tiao1 {

0%{

/* 变形--位移 */

transform: translateY(-500px);

}

100%{

transform: translateY(0);

}

}

@keyframes tiao2 {

0%{

transform: translateY(0);

}

100%{

transform: translateY(-100px);

}

}

@keyframes tiao3 {

0%{

transform: translateY(-100px);

}

100%{

transform: translateY(0);

}

}

@keyframes tiao4 {

0%{

transform: translateY(0);

}

100%{

transform: translateY(-50px);

}

}

@keyframes tiao5 {

0%{

transform: translateY(-50px);

}

100%{

transform: translateY(0);

}

}

@keyframes leftMove {

0%{

transform: translateX(0);

}

100%{

transform: translateX(-300px) scale(1.6) rotate(360deg);

}

}

@keyframes middle {

0%{

transform: translateX(0);

}

100%{

transform: translateX(0) scale(1.6) rotate(360deg);

}

}

@keyframes rightMove {

0%{

transform: translateX(0);

}

100%{

transform: translateX(300px) scale(1.6) rotate(360deg);

}

}

</style>

</head>

<body>

<div class="container">

<div class="ball ball1"><img src="img/1.png" alt=""></div>

<div class="ball ball2"><img src="img/2.png" alt=""></div>

<div class="ball ball3"><img src="img/3.png" alt=""></div>

</div>

</body>

1.png

3.png

2.png

  1. 在body标签中引入三张图片和css样式   

   <div class="container">

        <div class="ball ball1"><img src="img/1.png" alt=""></div>

        <div class="ball ball2"><img src="img/2.png" alt=""></div>

        <div class="ball ball3"><img src="img/3.png" alt=""></div>

    </div>

  2.css样式

设置三张图片位置，大小

       .container{

            width: 580px;

            height: 143px;

            /* outline: 1px dashed red; */

            /* 绝对定位 */

            /* 使用这种写法，也可以让 一个容器 水平，垂直 居中显示 */

            position: absolute;

            left: 0;

            right: 0;

            bottom: 0;

            top: 0;

            margin: auto;

        }

        .container .ball{

            /* 浮动 */

            float: left;

            margin-right: 50px;

        }

        /* :last-of-type 序选择器  ---表示容器中的最后一个元素 */

        .container .ball:last-of-type{

            margin-right: 0;

        }

        .container .ball img{

            width: 160px;

        }

3.给三个小盒子，添加 定位，让他们 最初“出现在哪里”----这个地方的定位，

        和布局没有关系，和你要做的 弹跳的 位置 有关系！！ 

      .ball{

            position: absolute;

            top: 0;

            left: 50%;

            margin-left: -80px;

        }

4. css3中的动画序列（排列动画）---给一个元素身上，添加多个动画效果 ，

            tiao1 动画名称

            0.5s  动画完成时间

            ease-in 速度

            1 动画执行的次数

            forwards 动画执行到最后一帧停止

             tiao2 0.2s ease-out 0.5s 1 forwards  其中， 0.5s动画延迟时间，表示 时间到0.5秒的时候，再执行tiao2这个动画

      .ball1{

            animation: tiao1 0.5s ease-in 1 forwards,

                       tiao2 0.2s ease-out 0.5s 1 forwards,

                       tiao3 0.2s ease-out 0.7s 1 forwards,

                       tiao4 0.15s ease-out 0.9s 1 forwards,

                       tiao5 0.15s ease-in 1.05s 1 forwards,

                       leftMove 0.4s ease-out 1.2s 1 forwards;

        }

       .ball2{

            animation: tiao1 0.5s ease-in 1 forwards,

                       tiao2 0.2s ease-out 0.5s 1 forwards,

                       tiao3 0.2s ease-out 0.7s 1 forwards,

                       tiao4 0.15s ease-out 0.9s 1 forwards,

                       tiao5 0.15s ease-in 1.05s 1 forwards,

                       middle 0.4s ease-out 1.2s 1 forwards;

        }

        .ball3{

            animation: tiao1 0.5s ease-in 1 forwards,

                       tiao2 0.2s ease-out 0.5s 1 forwards,

                       tiao3 0.2s ease-out 0.7s 1 forwards,

                       tiao4 0.15s ease-out 0.9s 1 forwards,

                       tiao5 0.15s ease-in 1.05s 1 forwards,

                       rightMove 0.4s ease-out 1.2s 1 forwards;

        }

5.设置图片弹跳动画的关键帧

         @keyframes tiao1 {

            0%{

                /* 变形--位移 */

                transform: translateY(-500px);

            }

            100%{

                transform: translateY(0);

            }

        }

        @keyframes tiao2 {

            0%{

                transform: translateY(0);

            }

            100%{

                transform: translateY(-100px);

            }

        }

        @keyframes tiao3 {

            0%{

                transform: translateY(-100px);

            }

            100%{

                transform: translateY(0);

            }

        }

        @keyframes tiao4 {

            0%{

                transform: translateY(0);

            }

            100%{

                transform: translateY(-50px);

            }

        }

        @keyframes tiao5 {

            0%{

                transform: translateY(-50px);

            }

            100%{

                transform: translateY(0);

            }

        }

        @keyframes leftMove {

            0%{

                transform: translateX(0);

            }

            100%{

                transform: translateX(-300px) scale(1.6) rotate(360deg);

            }

        }

        @keyframes middle {

            0%{

                transform: translateX(0);

            }

            100%{

                transform: translateX(0) scale(1.6) rotate(360deg);

            }

        }

        @keyframes rightMove {

            0%{

                transform: translateX(0);

            }

            100%{

                transform: translateX(300px) scale(1.6) rotate(360deg);

            }

        }

wangxinwang996
关注
使用 CSS 创建弹跳动画效果
WbhsOcaml的博客
10-01 752
在 50% 关键帧，我们将元素的垂直位移设为 -100px，模拟元素向上弹跳的效果。其中一种常见的动画效果是弹跳动画，它通过模拟物体在弹簧上弹跳的运动来展示元素的反弹效果。在本文中，我们将探讨如何使用 CSS 创建一个简单的弹跳动画效果，并提供相应的源代码示例。你可以根据需要调整动画的细节，例如修改关键帧的样式和时间点，调整动画的持续时间和时间函数，或添加其他样式属性来改变元素的外观。属性用于指定动画的时间函数，我们在这里使用了 “ease-in-out”，使得动画在开始和结束时有平滑的过渡。
CSS实现弹跳动画效果
DgboSql的博客
09-21 750
当动画播放时，元素将从初始位置（0%的关键帧，top: 0）开始向下移动（50%的关键帧，top: 200px），然后再回到初始位置（100%的关键帧，top: 0）。关键是定义好动画的关键帧，并通过改变元素的位置、大小或其他属性来实现所需的动画效果。CSS动画是网页开发中常用的技术之一，可以为网页元素添加各种各样的动态效果，其中包括弹跳动画。你可以根据需要调整元素的大小、颜色和动画的持续时间等属性，以实现你想要的弹跳动画效果。首先，我们需要创建一个HTML文件，并在其中添加一个带有弹跳动画效果的元素。
TMS320F28069 系统时钟初始化：从InitSysCtrl()看DSP的启动心脏
最新发布
weixin_33734785的博客
05-10 586
本文深入解析TMS320F28069 DSP的时钟系统初始化过程，重点剖析InitSysCtrl()函数的核心操作。从看门狗禁用、ADC校准到PLL配置，详细讲解如何构建稳定的时钟树，并分享调试时钟问题的实用技巧，帮助开发者掌握DSP的'心跳引擎'关键配置。
用CSS打造一个奇妙的可爱猫弹跳动画效果
canshanyin的博客
06-04 1516
本文以实例为基础，详细讲解了如何使用CSS实现一个有趣而实用的动画效果，旨在让大家更深入了解并掌握CSS动画的实现方法和技巧。该动画在0%、50%、100%三个阶段各自实现不同的设置：在0%和100%时设置猫头像的位置为400px，同时设置其大小不变化，即。如果你也喜欢这个可爱的猫弹跳动画效果，不妨也试试在自己的网页中加入该效果，营造出更加生动有趣的页面效果吧！上述代码中，我们将猫头像的图片作为背景图片，并设置其宽高为100px，以及。通过以上代码的设置，我们就成功实现了一个可爱的猫头像弹跳动画效果。
css创建平移和弹跳动画
weixin_43410094的博客
09-14 897
【代码】css创建平移动画。
CSS3弹跳小球运动效果
wangxinwang996的博客
04-14 988
* css3变形--垂直方向 位置的平移,并发生 旋转 *//* css3变形--垂直方向 位置的平移,并发生 旋转 *//* css变形---缩放 *//* css变形---缩放 *//* css3圆角半径 *//* css3动画 *//* css3动画 *//* 线性渐变 *//* 时间延迟 *//* 时间延迟 *//* 时间延迟 *//* 径向渐变 *//* 线性渐变 *//* 时间延迟 *//* 时间延迟 *//* 时间延迟 */
css3动画 小球弹跳
weixin_43352942的博客
07-07 1015
效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小球弹跳</title> <style> * { margin: 0; paddi
CSS 3 弹跳的小球动画的制作
weixin_72303943的博客
07-21 1040
CSS 3 弹跳的小球动画的制作
css3动画 小球弹跳下降
weixin_43352942的博客
07-07 826
效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小球弹跳下降</title> <style> * { margin: 0; pad
html小球跳跃技术原理,CSS3 实现弹跳的小球动画
weixin_33871933的博客
05-31 766
平时喜欢逛各大网站的专题版面，或者产品发布页面，因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面，以及下一个案例“变色龙动画”都是来自于百度浏览器，虽然我是谷歌浏览器的忠实用户，但是不得不说国内互联网行业知名品牌网站的专题页、产品发布页都是卯足了劲的让页面看起来很酷炫。这个案例关键点在于小球弹跳的节奏感和布局定位。一、案例知识点1、相对和绝对定位2、多个animation动...
css特效代码弹跳的精灵：一个让等待充满诗意的加载动画设计
Java程序员_编程开发学习笔记_网站安全运维教程_渗透技术教程
02-28 1077
在这个每毫秒都珍贵的时代，我们总在寻找速度与美感的平衡点。本文介绍的这款CSS加载动画，用最简洁的代码编织出一支微型芭蕾——三个光点以不同节奏轻盈起落，投影随之呼吸般涨缩，仿佛屏幕深处藏着看不见的弹簧床。适合移动端H5页面、渐进式网页应用(PWA)，0性能负担的等待提示。白色圆点在暗色背景上跳动，如同夜空闪烁的星群。让等待时光成为界面叙事的一部分。让这些跳跃的光点代替进度条，代替位置变化保障性能，参数实现自动往返运动，用机械运动演绎生命感，创造永续的弹性循环。
CSS弹跳动画
bwf_erg的博客
04-05 1157
回弹效果是指当一个过渡达到最终值时,往回 倒一点,然后再次回到最终值,如此往复一次或多次,并逐渐收敛,最终稳 定在最终值。举个例子,假设要用一个元素来模拟一个下落的小球如下图,我们会把 transform 属性1从 none 过渡到translateY(350px) 来模 拟这个下落过程。  实际上,回弹效果并不只对位移动画有帮助。对几乎所有类型的过渡动 画来说,它都可以显著增强动画的体验,其中
CSS动画：弹跳小球
weixin_45670873的博客
02-28 545
弹跳小球动画效果的实现
实现纯CSS弹跳球动画的项目指南
weixin_35749786的博客
05-01 963
CSS（Cascading Style Sheets），即层叠样式表，主要用于控制网页的布局、格式和样式。它允许开发者将内容的结构与视觉表现分离，简化了网页设计和维护的过程。CSS选择器是CSS规则中用于指定哪些元素会受到样式影响的模式。基本选择器包括元素选择器、类选择器、ID选择器和通配符选择器。元素选择器：直接选取具有特定标签名的元素，并对其应用样式。例如，p选择器会选择页面上所有的<p>元素。类选择器：使用符号加上类名来选取具有特定类属性的元素。例如，.note。
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 5万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
Bounce 动画的认识
qq_37916164的博客
02-22 705
Bounce指的是什么？ 弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。 语法 (Syntax) @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } 示例如下：（效果：运行时图片向上弹跳） <html> .
使用css制作一个网球弹跳的动画
王铁柱666的博客
01-08 300
函数中的值，你可以控制网球弹跳的速度和高度。你可以根据需要进一步调整这些值以及网球的样式和动画的其他属性。来定义动画的关键帧。的动画，该动画会使网球在垂直方向上移动，从而模拟弹跳效果。在这个示例中，我们创建了一个黄色的圆形div来代表网球。要使用CSS制作一个网球弹跳的动画，你可以使用。
CSS3干货9：做一个弹跳动画
九天翔龙的技术博客
12-08 1339
先看效果 步骤1：准备一个 div 标签 <div class="ball"> </div> 分析一下： 这个效果上有两个内容：球 ，影子。 球是这个div的 ::before 伪标签，影子 是这个球的 ::after 伪标签。 步骤2：制作小球和影子 *{ margin: 0; padding: 0...
【好看的CSS动画分享】悬浮球菜单CSS
qq_38192105的博客
12-11 1996
【好看的CSS动画分享】悬浮球菜单CSS
HTML5 弹跳动画（Bounce Animation）详解
王偃飞的博客
01-06 1664
CSS 方法：适合简单的弹跳效果，容易实现并且效果流畅。JavaScript 方法：提供更大的灵活性，可以在用户交互时动态控制弹跳效果。通过上述方法，您可以轻松实现元素的弹跳动画效果，使网页更加生动有趣。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值