css+div布局实现毛玻璃星球效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现毛玻璃星球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *:after { padding: 0; margin: 0; box-sizing: border-box; } body { display:flex; justify-content:center; align-items:center; height: 100vh; background: linear-gradient(to right top, #e5f2fa, #09334d); } .space { display: flex; align-items: center; justify-content: center; width:clamp(40rem, 80%, 60rem); } .planet { width: 20rem; aspect-ratio:1; border-radius: 50%; box-shadow: 1.3px 0 1.3px 1.3px #8097a1, inset -30px 0 50px 10px rgba(255,255,255,.7), inset -100px 0 100px 10px rgba(255,255,255,.2); } .crater { height: 100%; border-radius: 50%; overflow: hidden; } .crater > *{ position: relative; border-radius: 50%; transform: rotate(60deg); border-right: inset 4px #6464644d; box-shadow: inset -8px 0 10px 4px #64646466, 8px 0 5px 2px #ffffff66, inset 3px 0 1px 0 #ffffffb3; } .c { top: 10px; left: 90px; width: 40px; height: 65px; } .c2 { top: 30px; left: 90px; width: 50px; height: 75px; opacity: 0.4; } .c3 { width: 55px; height: 55px; top: -70px; left: -5px; } .c4 { width: 80px; height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0