css实现月亮当空挂夜色星星移动效果代码-html代码-BFW代码库

css实现月亮当空挂夜色星星移动效果代码

代码语言：html

代码描述：css实现月亮当空挂夜色星星移动效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	perspective:300px;
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
	overflow:hidden;
	background-image:radial-gradient(navy,#002)
}
div {
	--color:lightgoldenrodyellow;
	position:relative;
	font-size:2rem;
	height:5em;
	width:5em;
	border-radius:50%;
	box-shadow:inset -0.4em -0.55em .5em -0.25em #0007,inset -0.75em -0.5em .075em .25em var(--color),2em .05em 3em -1.5em var(--color)
}
@keyframes orbit {
	0% {
	transform:rotateZ(0deg)
}
100% {
	transform:rotateZ(360deg)
}
}div::before,div::after {
	position:absolute;
	top:200%;
	left:-1000%;
	display:block;
	height:200rem;
	width:200rem;
	content:'';
	border-radius:50%;
	z-index:-1;
	animation:orbit 300s infinite linear;
	box-shadow:-40rem -106rem 1rem -99.5rem #fff6,-40rem -106rem 1px -99.65rem #c568,-32rem -96rem 1.5rem -99.5rem #ffe8,-32rem -96rem 1px -99.9rem #ffc9,-31rem -110rem 1.5rem -99.5rem #ffe6,-31rem -110rem 1px -99.9rem #ffc6,-11rem -115rem 1.5rem -99.5rem #ffe8,-11rem -115rem 1px -99.9rem #ffc6,11rem -105rem 1.5rem -99.5rem #ffe6,11rem -105rem 1px -99.9rem #ffc6,-11rem -135rem 1.5rem -99.5rem #ffe4,-11rem -135rem 1px -99.9rem #ffc5,31rem -115rem 1.5rem -99.5rem #ffe6,31rem -115rem 1px -99.9rem #ffc6,-51rem -115rem 1.5rem -99.5rem #ffe9,-51rem -115rem 1px -99.9rem #ffc6,21rem -125rem 1.5rem -99.5rem #ffe6,21rem -125rem 1px -99.9rem #ffc6,5rem -115rem 1.5rem -99.5rem #ffe9,5rem -115rem 1px -99.9rem #ffc6,-96rem -32rem 1.5rem -99.5rem #ffe8,-96rem -32rem 1px -99.9rem #ffc9,-110rem -31rem 1.5rem -99.5rem #ffe6,-110rem -31rem 1px -99.9rem #ffc6,-115rem -11rem 1.5rem -99.5rem #ffe8,-115rem -11rem 1px -99.9rem #ffc6,-105rem 11rem 1.5rem -99.5rem #ffe6,-105rem 11rem 1px -99.9rem #ffc6,-135rem -11rem 1.5rem -99.5rem #ffe4,-135rem -11rem 1px -99.9rem #ffc5,-115rem 31rem 1.5rem -99.5rem #ffe6,-115rem 31rem 1px -99.9rem #ffc6,-115rem -51rem 1.5rem -99.5rem #ffe9,-115rem -51rem 1px -99.9rem #ffc6,-125rem 21rem 1.5rem -99.5rem #ffe6,-125rem 21rem 1px -99.9rem #ffc6,-115rem 5rem 1.5rem -99.5rem #ffe9,-115rem 5rem 1px -99.9rem #ffc6,96rem 32rem 1.5rem -99.5rem #ffe8,96rem 32rem 1px -99.9rem #ffc9,110rem 31rem 1.5rem -99.5rem #ffe6,110rem 31rem 1px -99.9rem #ffc6,115rem 11rem 1.5rem -99.5rem #ffe8,115rem 11rem 1px -99.9rem #ffc6,105rem -11rem 1.5rem -99.5rem #ffe6,105rem -11rem 1px -99.9rem #ffc6,135rem 11rem 1..........完整代码请登录后点击上方下载按钮下载查看