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