css实现树的年轮效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现树的年轮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { width: 100vw; height: 100vh; background-color: #e9c163; display: flex; justify-content: center; align-items: center; align-content: center; overflow: hidden; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .bark { border: 1.25vw solid #936d15; border-radius: 47% 44% 48% 46%; filter: url(#squiggle2); background-color: #ecc979; box-shadow: 25px 20px 60px rgba(0, 0, 0, 0.35); } .year { border: 3px solid #e7bb55; border-radius: 47% 44% 48% 46%; padding: 0.5vw; } svg { position: absolute; } .center { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; text-align: center; } h1 { color: #f2dba6; font-size: 9vw; letter-spacing: -0.4vw; text-shadow: 0vw 0vw 2.5vw rgba(0, 0, 0, 0.15); margin: 0 0 24px; } p { color: #f9edd2; font-size: 1.7vw; text-shadow: 0vw 0vw 1vw rgba(0, 0, 0, 0.15); } </style> </head> <body > <div class="bark"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> <div class="year"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0