纯css布局实现试管容器效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现试管容器效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap"); * { /*border:solid 1vh red;*/ font-family: "Baloo 2", cursive; } body { width: 100%; height: 100%; overflow-x: hidden; background: #333333; } h1 { color: #e0f6ef; text-align: center; padding: 1vh; z-index: 10; } .container { max-width: 1010px; margin: auto; position: realtive; z-index: 10; } h2 { /*月份*/ position: absolute; top: 72%; color: rgba(255, 255, 255, 0.5); z-index: 20; font-size: 30px; writing-mode: horizontal-tb; } .shadow { /*試管口*/ position: relative; width: 70px; height: 10px; background: #e0f6ef; margin: 5px auto; margin-bottom: 0; padding: 0; top: 0%; left: 0%; border-radius: 30px; /*陰影*/ } .shadow:before { content: ""; position: absolute; top: 3200%; left: 0; background: rgba(0, 0, 0, 0.3); width: 50px; height: 10px; margin: 10px; border-radius: 50%; } .bottle { display: inline-block; margin-top: 100px; } .box { position: relative; width: 60px; height: 300px; margin: 10px; margin-top: 0; padding: 0; /*border-left: 2px solid $bottle; border-right: 2px solid $bottle; border-bottom: 2px solid $bottle;*/ border-radius: 0 0 60px 60px; overflow: hidden; color: rgba(255, 255, 255, 0.5); font-size: 14px; text-align: right; writing-mode: vertical-rl; /*文字直書:由左至右lr*/ /*文字直書:由右至左rl*/ /*波浪*/ } .box::after { content: ""; position: absolute; bottom: 90%; left: 55%; background: #e0f6ef; width: 370px; height: 290px; border-radius: 30%; box-sizing: border-box; transform: translateX(-50%) rotate(0); animation: wave 10s linear infinite; } .box::before { content: ""; position: absolute; bottom: 90%; left: 55%; background: rgba(255, 255, 255, 0.5); width: 470px; height: 390px; border-radius: 50%; box-sizing: border-box; transform: translateX(-50%) rotate(0); animation: wave 6s linear infinite -5s; } /*刻度*/ .bobble { position: absolute; background: rgba(255, 255, 255, 0.5); top: 50%; left: -10%; width: 20px; height: 5px; border-radius: 10px; } .bobble::before { content: ""; position: absolute; background: rgba(255, 255, 255, 0.5); left: 0; top: 800%; width: 20px; height: 5px; border-radius: 10px; } .bobble::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.5); left: 0; top: -800%; width: 20px; height: 5px; border-radius: 10px; } .box.a { background: linear-gradient(107deg, #ba2913, #f0bcb4); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.a:hover { background: linear-gradient(107deg, #ba2913, #f0bcb4); } .box.b { background: linear-gradient(107deg, #3c1f69, #cab7e8); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.b:hover { background: linear-gradient(107deg, #3c1f69, #cab7e8); } .box.c { background: linear-gradient(107deg, #6bbcd1, #c4ebf5); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.c:hover { background: linear-gradient(107deg, #6bbcd1, #c4ebf5); } .box.d { background: linear-gradient(107deg, #657370, #e4f7f4); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.d:hover { background: linear-gradient(107deg, #657370, #e4f7f4); } .box.e { background: linear-gradient(107deg, #27a342, #b2edbf); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.e:hover { background: linear-gradient(107deg, #27a342, #b2edbf); } .box.f { background: linear-gradient(107deg, #b0288e, #f0c7e6); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.f:hover { background: linear-gradient(107deg, #b0288e, #f0c7e6); } .box.g { background: linear-gradient(107deg, #f54c4c, #d79797); background-size: 600% 600%; animation: GradientBackground 5s ease infinite; } .box.g:hover { background: linear-gradient(107deg, #f54c4c, #d79797); } .box.h { background: linear-gradient(107deg, #58912f, #ccedb4); background-size: 600% 600%; animation: GradientBackground 5s ease infin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0