html css 实现小球跳动动画

在学习html5 和css3的时候，用到了动画效果animation。

具体步骤是：

定义一个大盒子box，box-content 代表小球，circle代表小洞。。

     <div class="box">
        <div class="box-content left"></div>
        <div class="circle left1"></div> 
    </div>复制

2. 设置外层盒子的样式，采用display属性，以列的形式进行排序。。

内部元素位置为底部对齐

       .box {
            width: 100px;
            height: 300px;
            /* border: 1px solid #000; */
            margin:0 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }复制

3. 设置小球样式，宽高各为50px，边框弧度为百分之50，背景颜色为渐变色，

      .box-content {
            width: 50px;
            height: 50px;
            /* border: 1px solid #000; */
            border-radius: 50%;
            /* margin: 20px auto; */
            background: linear-gradient(0deg,blue,red);
            box-shadow: 0 0 5px  rgba(0,0,0,0.5);
            animation: animal 2s infinite alternate linear;
      }复制

4.设置circle样式，

 .circle{
            width: 50px;
            height: 10px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 50%;
            animation: animal1 2s infinite alternate linear;
}复制

5.设置动画效果，

         /* 小洞的动画效果 */
        @keyframes animal1 {
              0% {
                 transform: scale(1.2);
              }
              100% {
                transform: scale(0.5);
              }
        }
        /*小球的动画效果 */
        @keyframes animal {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-250px);
            }
        }复制

效果如下：

全部代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            /* justify-content: flex-end; */
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 100px;
            height: 300px;
            /* border: 1px solid #000; */
            margin:0 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }
        .box-content {
            width: 50px;
            height: 50px;
            /* border: 1px solid #000; */
            border-radius: 50%;
            /* margin: 20px auto; */
            background: linear-gradient(0deg,blue,red);
            box-shadow: 0 0 5px  rgba(0,0,0,0.5);
            animation: animal 2s infinite alternate linear;
        }
        
        .box .left {
            background: linear-gradient(0deg,rgb(0, 255, 170),rgb(0, 162, 255));
            animation-duration: 800ms;
        }
        .box .left1 {
            animation-duration: 800ms;
        }
        .box .right {
            background: linear-gradient(0deg,rgb(208, 255, 0),rgb(255, 0, 230));
            animation-duration: 1s;
            /* animation-delay: 50ms; */
        }
        .box .right1 {
             animation-duration: 1s;
        }
        .circle{
            width: 50px;
            height: 10px;
            background-color: rgba(0,0,0,0.5);
             border-radius: 50%;
             animation: animal1 2s infinite alternate linear;
        }
        /* 小洞的动画效果 */
        @keyframes animal1 {
              0% {
                 transform: scale(1.2);
              }
              100% {
                transform: scale(0.5);
              }
        }
        /*小球的动画效果 */
        @keyframes animal {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-250px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-content left"></div>
        <div class="circle left1"></div> 
    </div>
    <div class="box">
        <div class="box-content"></div>
        <div class="circle"></div>
    </div>
    <div class="box">
        <div class="box-content right"></div>
        <div class="circle right1"></div>  
    </div>
</body>
</html>复制

html css 实现小球跳动动画

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

H5 CSS3-移动端兼容/调试/视口/flex布局

CSS--解决图片变形的方法

js/jquery打字机效果/文字渐变效果（文字逐个出现）

Chapter1.1——HTML5 Canvas API中的font

祝祖国母亲75周年生日快乐-用HTML实现五星红旗

36. 大学生HTML期末大作业 ―【高端炫酷的IT网络公司网页】 Web前端网页制作 html css js

4.9.0Echarts巧用遮罩实现仪表盘不同指针样式

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<div class="box">
	<div class="box-content left"></div>
	<div class="circle left1"></div>
	</div>

	.box {
	width: 100px;
	height: 300px;
	/* border: 1px solid #000; */
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	}

	.box-content {
	width: 50px;
	height: 50px;
	/* border: 1px solid #000; */
	border-radius: 50%;
	/* margin: 20px auto; */
	background: linear-gradient(0deg,blue,red);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	animation: animal 2s infinite alternate linear;
	}

	.circle{
	width: 50px;
	height: 10px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 50%;
	animation: animal1 2s infinite alternate linear;
	}

	/* 小洞的动画效果 */
	@keyframes animal1 {
	0% {
	transform: scale(1.2);
	}
	100% {
	transform: scale(0.5);
	}
	}
	/小球的动画效果 /
	@keyframes animal {
	0% {
	transform: translateY(0);
	}
	100% {
	transform: translateY(-250px);
	}
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	body {
	width: 100vw;
	height: 100vh;
	display: flex;
	/* justify-content: flex-end; */
	justify-content: center;
	align-items: center;
	}
	.box {
	width: 100px;
	height: 300px;
	/* border: 1px solid #000; */
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	}
	.box-content {
	width: 50px;
	height: 50px;
	/* border: 1px solid #000; */
	border-radius: 50%;
	/* margin: 20px auto; */
	background: linear-gradient(0deg,blue,red);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	animation: animal 2s infinite alternate linear;
	}

	.box .left {
	background: linear-gradient(0deg,rgb(0, 255, 170),rgb(0, 162, 255));
	animation-duration: 800ms;
	}
	.box .left1 {
	animation-duration: 800ms;
	}
	.box .right {
	background: linear-gradient(0deg,rgb(208, 255, 0),rgb(255, 0, 230));
	animation-duration: 1s;
	/* animation-delay: 50ms; */
	}
	.box .right1 {
	animation-duration: 1s;
	}
	.circle{
	width: 50px;
	height: 10px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 50%;
	animation: animal1 2s infinite alternate linear;
	}
	/* 小洞的动画效果 */
	@keyframes animal1 {
	0% {
	transform: scale(1.2);
	}
	100% {
	transform: scale(0.5);
	}
	}
	/小球的动画效果 /
	@keyframes animal {
	0% {
	transform: translateY(0);
	}
	100% {
	transform: translateY(-250px);
	}
	}
	</style>
	</head>
	<body>
	<div class="box">
	<div class="box-content left"></div>
	<div class="circle left1"></div>
	</div>
	<div class="box">
	<div class="box-content"></div>
	<div class="circle"></div>
	</div>
	<div class="box">
	<div class="box-content right"></div>
	<div class="circle right1"></div>
	</div>
	</body>
	</html>

html css 实现小球跳动动画

微信扫一扫：分享