10.CSS 能量球动画特效

Posted 2023-02-19 @大迁世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10.CSS 能量球动画特效相关的知识，希望对你有一定的参考价值。

效果

源码

<!DOCTYPE html>
<html>
<head>
	<title>Energy Ball Animation Effects</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="energy">
		<span style="--clr:#fbad04;--i:18px;--d:2.5s;"></span>
		<span style="--clr:#03a1d9;--i:13px;--d:5s;"></span>
		<span style="--clr:#f7036d;--i:15px;--d:7.5s;"></span>
		<span style="--clr:#93ff16;--i:20px;--d:10s;"></span>
	</div>
</body>
</html>

css

*

	margin: 0;
	padding: 0;
	box-sizing: border-box;

body 

	display: flex;
	justify-content: center;
	align-items: center;

以上是关于10.CSS 能量球动画特效的主要内容，如果未能解决你的问题，请参考以下文章

游戏开发实战Unity使用ShaderGraph制作一个Loading水球（能量球 | UI | 2D | 特效 | URP）

能量球

简单的js特效，背景圆球滚动，类似电脑屏幕锁屏气球