纯css布局试管动画效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局试管动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> :root { --background-color: #333642; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 600px; height:600px; background: var(--background-color); } /* Smaller container - potentially to add in a rack later */ .rack-frame { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); width: 300px; height: 200px; } .tube1 { --liquid-color: #002DF9; --liquid-height: 50%; left: 25px; } .tube2 { --liquid-color: #F950B6; --liquid-height: 20%; left: 90px; } .tube3 { --liquid-color: #03BD3A; --liquid-height: 40%; left: 160px; } .tube4 { --liquid-color: #F76B21; --liquid-height: 70%; left: 230px; } .test-tube { position: absolute; top: -25px; height: 150px; width: 40px; border-radius: 0 0 30% 30%; background: linear-gradient(to top, var(--liquid-color), var(--liquid-color) var(--liquid-height), transparent var(--liquid-height), transparent); } /* Gradient to create tube shape */ .test-tube::before { content: ''; position: absolute; height: 150px; width: 40px; border-radius: 0 0 30% 30%; background: linear-gradient(to right, rgba(255,255,255, 0.6), rgba(255,255,255, 0.1) 50%, rgba(255,255,255, 0.6) ); } /* Circle at top of test tube */ .test-tube::after { content: ''; position: absolute; left: -5px; top: -5px; width: 40px; height: 5px; border-radius: 50%; border: 5px solid rgba(255,255,255, 0.6); } .bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); animation: bubbleUp 2s infinite; width: 10px; heig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0