div+css实现五环堆叠效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现五环堆叠效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; background: #E1E5E8; } .box{ display: block; position: relative; width: 60vw; height: 70vh; margin: auto; margin-top: 8%; background: none; } .circle-1, .circle-2, .circle-3, .circle-4, .circle-5{ position: absolute; width: 200px; height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); background: #eef0f4; box-shadow: 10px 10px 15px #d4d6d9, -10px -10px 15px #ffffff; } .circle-1{ top: 50%; left: 50%; z-index: 5; } .circle-2{ top: 35%; left: 25%; z-index: 2; } .circle-3{ top: 30%; left: 40%; z-index: 3; } .circle-4{ top: 35%; left: 65%; z-index: 4; } .circle-5{ top: 60%; left: 76%; z-index: 1; } .inner-circl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0