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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0