div+css实现立体圆环小球下坡阴影效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体圆环小球下坡阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --b1: #141420; --b2: #13131d; --c3: #383a51; --bg1: #393b52; --bg2: #1f2130; --r1: #717699; --r2: #8286ac; --r3: #141420; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .content { width: 100vw; height: 100vh; background: linear-gradient(-45deg, var(--bg1), var(--bg2)); display: flex; align-items: center; justify-content: center; } .base { width: 150vw; height: 100vh; position: absolute; top: calc(50vh + 18.5vmin); background: var(--r3); transform-origin: 50% 0; transform: rotate(13deg); } .base:before { content: ""; position: absolute; background: linear-gradient(45deg, var(--r2), var(--r1)); width: 100%; height: 5vmin; } .base:after { content: ""; position: absolute; background: radial-gradient(circle at 68% -14%, #000, #fff0 8vmin), radial-gradient(circle at 50% 50%, #000000c2, #fff0), radial-gradient(circle at 50% 50%, #000c, #fff0); border-radius: 100% 20% 50% 0; width: 40%; height: 3vmin; top: 2.1vmin; left: 50%; transform: translateX(-65%); filter: blur(3px); } .ring { position: absolute; margin-left: 6vmin; width: 43vmin; height: 45vmin; border-radius: 100%; background: linear-gradient(-5deg, #fff0 43vmin, #000c), radial-gradient(circle at 63% 40%, #fff0 0 23vmin, #000d 31vmin), linear-gradient(180deg, #fff0 40vmin, #000c), radial-gradient(circle at 50% 100%, #0006 0vmin, #fff0 5vmin), radial-gradient(circle at 55% 105%, #0006 0vmin, #fff0 8vmin), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0