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

代码语言:html

所属分类:布局界面

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0