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