js+css实现宇宙行星运转轨迹动画代码-html代码-BFW代码库

js+css实现宇宙行星运转轨迹动画代码

代码语言：html

所属分类：动画

代码描述：js+css实现宇宙行星运转轨迹动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
/* Réglages de base */
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0a0a2a;
	overflow: hidden;
	perspective: 1000px;
}

/* Fond de l'espace */
.space-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at 30% 30%,
			rgba(45, 85, 255, 0.15) 0%,
			transparent 60%
		),
		radial-gradient(
			circle at 70% 70%,
			rgba(255, 85, 85, 0.15) 0%,
			transparent 60%
		);
	overflow: hidden;
	animation: backgroundPulse 10s ease-in-out infinite;
	mix-blend-mode: screen;
}

/* Nébuleuse (effet flou) */
.nebula {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at 20% 20%,
			rgba(255, 0, 255, 0.1) 0%,
			transparent 40%
		),
		radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
		radial-gradient(
			circle at 50% 50%,
			rgba(255, 255, 0, 0.05) 0%,
			transparent 60%
		);
	filter: blur(30px);
	animation: nebulaMove 20s ease-in-out infinite;
}

/* Conteneur principal de l'animation */
.spinner-container {
	position: relative;
	width: min(600px, 90vw);
	height: min(600px, 90vw);
	z-index: 1;
	transform-style: preserve-3d;
	animation: containerFloat 8s ease-in-out infinite;
	filter: drop-shadow(0 0 20px rgba(102, 102, 255, 0.2));
}

/* Effet "portail" */
.portal-effect {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(102, 204, 255, 0.1) 25%,
		rgba(102, 204, 255, 0.2) 50%,
		rgba(102, 204, 255, 0.1) 75%,
		transparent 100%
	);
	animation: portalSpin 10s linear infinite;
	pointer-events: none;
}

/* Champ d'énergie au centre */
.energy-field {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(
		circle,
		rgba(102, 204, 255, 0.1) 0%,
		transparent 70%
	);
	filter: blur(20px);
	animation: energyPulse 4s ease-in-out infinite;
}

/* Anneaux colorés */
.ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: transl.........完整代码请登录后点击上方下载按钮下载查看