纯css实现淋浴喷洒洗澡动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现淋浴喷洒洗澡动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --bath-color: white; --bath-accent-color: #BFBFBF; --bath-feet-color: gray; --shower-color: gray; --very-transparent-white: rgba(255,255, 255, 0.3); --medium-transparent-white: rgba(255,255, 255, 0.8); } body{ background: #5EBCA1; } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .shower-pole { position: absolute; right: 10px; width: 30px; height: 150px; border: 15px solid var(--shower-color); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50% 50% 0 0 / 40% 20% 0 0; } .water { position: absolute; width: 100px; height: 180px; top: 0px; right: 11px; transform: rotate(20deg); clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%); } .water::before { content: ''; position: absolute; width: 100px; height: 540px; background: repeating-linear-gradient( var(--medium-transparent-white), var(--medium-transparent-white) 8px, var(--very-transparent-white) 36px, var(--medium-transparent-white) 72px ); animation: waterFall 2s infinite linear; } @keyframes waterFall { 0% { transform: translateY(-360px); } 100% { transform: translateY(0px); } } /* Shower head */ .shower-pole::after { content: ''; position: abs.........完整代码请登录后点击上方下载按钮下载查看
网友评论0