让一个小球无限的弹弹弹~(CSS实现球无限弹动)

最新推荐文章于 2022-08-08 22:59:09 发布
最新推荐文章于 2022-08-08 22:59:09 发布
阅读量1.9k 收藏 9
点赞数
文章标签： CSS 无限弹跳球
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L333333333/article/details/101613687
版权

原生CSS实现球无限弹动

效果图

在这里插入图片描述

制作步骤

做个球放在网页中央

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #b2bec3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.ball{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: radial-gradient(at center,
			#74b9ff,#0984e3);
	}
</style>

<div class="ball"></div>

这一步完成后效果
在这里插入图片描述

让球跳起来

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #b2bec3;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.ball{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: radial-gradient(at center,
			#74b9ff,#0984e3);
		animation:bounce 2s;
		animation-direction: alternate-reverse;
		animation-iteration-count: infinite;
	}
	
	@keyframes bounce{
		to{
			transform: translateY(-300px);
		}
	}
</style>

<div class="ball"></div>

这一步完成后效果
在这里插入图片描述

加个落地阴影

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #b2bec3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.ball{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: radial-gradient(at center,
			#74b9ff,#0984e3);
		animation:bounce 2s;
		animation-direction: alternate-reverse;
		animation-iteration-count: infinite;
	}

	div.shadow{
		position: absolute;
		z-index: -1;
		width: 100px;
		height: 40px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		filter: blur(5px);
		transform: translateY(20px);
	}

	@keyframes bounce{
		to{
			transform: translateY(-300px);
		}
	}
</style>

<div class="ball"></div>
<div class="shadow"></div>

加过的效果
在这里插入图片描述

让阴影更加自然(加上动效)

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #b2bec3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.ball{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: radial-gradient(at center,
			#74b9ff,#0984e3);
		animation:bounce 2s;
		animation-direction: alternate-reverse;
		animation-iteration-count: infinite;
	}

	div.shadow{
		position: absolute;
		z-index: -1;
		width: 100px;
		height: 40px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		filter: blur(5px);
		transform: translateY(20px);
		animation:shadow 2s;
		animation-direction: alternate-reverse;
		animation-iteration-count: infinite;
	}

	@keyframes bounce{
		to{
			transform: translateY(-300px);
		}
	}

	@keyframes shadow{
		to{
			rgba(0,0,0,.1);
			filter: blur(30px);
		}
	}
</style>

<div class="ball"></div>
<div class="shadow"></div>

最终效果
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无限弹动小球</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		body{
			width: 100vw;
			height: 100vh;
			background: #b2bec3;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		div.ball{
			position: absolute;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: radial-gradient(at center,
				#74b9ff,#0984e3);
			animation:bounce 2s;
			animation-direction: alternate-reverse;
			animation-iteration-count: infinite;
		}

		div.shadow{
			position: absolute;
			z-index: -1;
			width: 100px;
			height: 40px;
			border-radius: 50%;
			background: rgba(0,0,0,.5);
			filter: blur(5px);
			transform: translateY(20px);
			animation:shadow 2s;
			animation-direction: alternate-reverse;
			animation-iteration-count: infinite;
		}

		@keyframes bounce{
			to{
				transform: translateY(-300px);
			}
		}

		@keyframes shadow{
			to{
				rgba(0,0,0,.1);
				filter: blur(30px);
			}
		}
	</style>
</head>
<body>
	<div class="ball"></div>
	<div class="shadow"></div>
</body>
</html>

本博客其他文章推荐

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

maven新手上路–创建webapp项目，引入jstl、el依赖及el不解析的问题解决（详细图文）

springmvc5.1.9在控制器中一个方法可跳视图也可跳方法问题解决

手撸一个自己的简易struts2框架吧！

struts2.5.20使用通配符和出现的问题解决

blankliu404
关注
css动效学习
ljsalove的博客
06-05 2084
我很喜欢动态效果啊！在慕课网上看见一个css的动效教程，视频不是很清楚，但是有源码，就开始研究啦！自己喜欢的东西，写起来就特别开心！坚持下去！之前看css的知识点，就只看看，没有练习，很快就忘记啦。而且看得很枯燥，应该一边看一般找例子，做做！鼠标悬浮动效果:hover       总结：transform定义了元素的变形，transition定义了元素的属性变化样式，animation与@key
CSS动画效果学习
weixin_47683287的博客
10-27 205
CSS动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 动画 animation 可以指定一个元素从一个状态自动到另一个状态的过程 animation-name：自定义动画名字 animation-duration：指定动画的完成时间
快速学习css动画效果
qq_48235154的博客
12-09 335
css动画效果 剑客逐帧动画
CSS+CSS3动画——笔记整理
Iwltmy的博客
10-20 300
1.CSS使用的方法有三种： 1）行内样式：在需要的标签中使用style属性并且在它的值上使用CSS属性与值就可以了 2）内联样式表：当前页面中使用style标签并且在这个标签中使用CSS样式表的格式来使用样式属性。 3）外联样式表：当前页面中使用link标签来外链一个样式表 2.样式选择器：让样式表中的样式在选中的页面元素生效。 基础样式选择器： 格式：*{样式} 作用：页面中所有元素都选中 标签选择器： 格式：标签名{样式} 作用：页面中所有该标签元素都选中 ID选择器： 格式：#ID{样式} 作用：页
【一、弹跳小球】
weixin_54597744的博客
02-16 1622
【一、弹跳小球】 本节利用 printf 函数 实现一个在屏幕上弹跳的小球，内容简单容易入门，这也是以后我们在设计更多游戏中可能用到的东西。 目录【一、弹跳小球】绘制静止的小球小球下落上下弹跳的小球斜方向弹跳控制小球弹跳速度小结 绘制静止的小球 我们将以如图坐标系进行游戏，即以窗口左上角为原点。 我们希望在坐标（x , y）处显示静止的小球： #include <stdio.h> int main(){ int i,j; // 这两个量是循环中要使用的，一定先声明 int x = 5;
纯CSS3实现的3D小球动画在线演示
06-12
本项目标题“纯CSS3实现的3D小球动画在线演示”所涉及的核心知识点，就是利用CSS3的3D转换和动画特性来创建一个立体的小球动态效果。这个特效模拟了小球落地后跳动的真实物理运动，不断循环，为用户带来沉浸式的交互...
4种纯CSS3小球物理运动动特效
12-13
2. **小球绕大球旋转效果**：这个效果利用了CSS3的transform属性，特别是`rotateZ()`函数，来实现小球围绕一个中心点（大球）进行3D旋转。`transform-origin`属性可以设定旋转的中心点，而`animation`属性结合关键帧...
python实现弹跳小球
09-19
本篇将详细介绍如何使用Python的`tkinter`库来创建一个弹跳小球的程序。 首先，我们需要导入必要的库，包括`Tkinter`（Python 3中写作`tkinter`）、`random`和`time`。`Tkinter`是Python的标准GUI库，用于创建窗口...
Canvas的使用样例：动画的实现，以弹跳小球为例
01-27
1，Canvas实现动画的原理（1）首先设置一个定时器，反复调用绘图函数（一般每秒30~40次）。每次调用，都会重绘整个画布。完成后的效果就像动画一样，每一帧间过渡会平滑而流畅。（2）有两种方法都可以实现重复绘制：...
python实现小球弹跳效果
09-19
这里我们将详细探讨如何使用Python的Pygame库来实现一个小球在窗口内弹跳的效果。 首先，我们需要导入必要的库。在本例中，我们只用到了`pygame`库，它是一个强大的Python模块，提供了丰富的功能来开发2D游戏。`sys...
HTML5立体小球运动动画效果.zip
07-04
HTML5立体小球运动动画效果是一款利用canvas实现的3d立体空间内小球的运动。
用js实现图片（小球）在屏幕上上下左右移动
weixin_30692143的博客
10-16 789
<html> <head> <title>Document</title> </head> <body style="background-image:URL('./b1.png')"> <div id="sundiv" style="position:absolute"> &...
c语言程序设计小球弹跳,c语言小游戏程序之弹跳小球的实现代码
weixin_42501688的博客
05-17 1655
现在说一下其中一个最简单的小程序：弹跳小球———————————————LINE————————————————首先我们知道，在窗口的坐标系原点是在窗口左上角的，如图所示然后我们如果想在这个坐标系里面的某个点上画出一个小球，那么它的坐标系应该就是这样的转换到c语言的思维的话：X0既是打印出X0个“\n”，Y0既是打印出Y0个空格!!!!SO代码如下#include #include int mai...
【小河今学 | JavaScript】小球弹跳
LB_laber的博客
08-08 681
JavaScript实现小球弹跳
css+html鼠标划入hover效果(一)
go
07-05 3189
效果图： html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt
CSS小球下落回弹动画效果
qq_44675204的博客
05-04 1128
使用CSS动画属性完成小球回弹动画效果
html滑动仿悬浮球菜单
weixin_33769125的博客
06-04 831
//声明属性赋值 var flag=0; var motion = document.getElementById('xuanfu'); var disX,disY; //元素左/上 ‘半径’ var moveX,moveY; var L,T; //可移动范围 var starX,starY; var starXEnd,starY...
纯JS实现小球在页面跳动/弹弹弹（有注释）
追雪球的代码周记
01-11 1338
小球在页面跳动 实现方法用了transform:translate(x,y); 即在当前位置进行移动，只需动态改变x和y的值就可以实现移动 点我查看页面效果（点击小球开始跳动） JS //获取div节点 let divEle = document.getElementsByTagName("div")[0]; //在js里给小球设置样式 divEle.style.width = 50 + "px"; divEle.style.height = 50 + "px"; divEle.style.backgrou
vue h5 实现原生js悬浮球
weixin_47433173的博客
09-29 616
详细看代码 <div id="float-ball"> <!-- <i class="icon-float-ball"></i> --> </div> activated () { this.startDrag1(document.getElementById('float-ball'), document.getElementById('float-ball')) // 开始拖动效果 document.getEle
Android游戏开发实践：弹跳小球物理引擎实现
通常，`BallThread`会有一个`run()`方法，该方法包含一个无限循环，不断地计算和更新小球的位置、速度，并调用`Canvas`进行绘制。小球的运动基于物理学中的重力加速度和碰撞反弹原理，因此在`BallThread`中需要考虑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值