div+css实现创意加冰水杯入口按钮动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现创意加冰水杯入口按钮动画效果代码
代码标签: div css实 创意 加冰 水杯 入口 按钮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet" /> <style> body { background: #232332; } .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .glass:first-child { margin-right: 120px; } /*------------------------------- グラス -------------------------------*/ .glass { display: flex; justify-content: center; align-items: center; position: relative; z-index: 0; text-decoration: none; width: 320px; height: 80px; background: rgba(255, 255, 255, 0.2); background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)); border-radius: 0 0 12px 12px; } .glass::before { content: ''; position: absolute; z-index: -1; top: -22px; left: -6px; width: 10px; height: 100px; transform-origin: top left; border-radius: 0 6px 0 0; transform: rotate(-20deg); } .glass::after { content: ''; position: absolute; z-index: -1; top: -24px; left: -31px; width: 36px; height: 10px; transform-origin: top left; border-radius: 0 6px 0 0; } .glass.soda::before, .glass.soda::after { background: #ff3363; } .glass.cola::before, .glass.cola::after { background: #fff; } /*------------------------------- テキスト -------------------------------*/ .text { position: relative; z-index: 4; font-family: 'Rubik Mono One', monospace; font-weight: 400; font-style: normal; font-size: 28px; letter-spacing: 0.2em; color: #fff; } /*------------------------------- 反射 -------------------------------*/ .reflection { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: solid 2px rgba(255, 255, 255, 0.8); border-radius: inherit; } .reflection::before, .reflection::after { content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; width: calc(100% - 12px); } .reflection::before { top: 4px; height: calc(100% - 12px); background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 90% 100%, 90% 0%, 15% 0%, 15% 100%, 12% 100%, 12% 0%, 8% 0%, 8% 100%, 0% 100%); } .reflection::after { bottom: 6px; height: 40%; border-radius: 0 0 6px 6px; } .glass.soda .reflection::after { background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); } .glass.cola .reflection::after { background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); } /*------------------------------- 氷 -------------------------------*/ .iceWrap { position: absolute; z-index: 3; top: 0; left: 0; right: 0; margin: 0 auto; width: calc(100% - 12px); height: calc(100% - 6px); } .ice { position: absolute; width: 32px; height: 32px; transition: all ease 4s; animation: ice ease 5s infinite; } .ice::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; background: radial-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.5)); mix-blend-mode: soft-light; } .ice-1 { left: 3%; bottom: 40%; transform: rotate(-25deg); } .ice-2 { left: 15%; bottom: 20%; transform: rotate(34deg); } .ice-3 { left: 35%; bottom: 35%; transform: rotate(20deg); } .ice-4 { left: 50%; bottom: 30%; transform: rotate(-22deg); } .ice-5 { left: 70%; bottom: 50%; transform: rotate(30deg); } .ice-6 { left: 84%; bottom: 30%; transform: rotate(-47deg); } /*------------------------------- ジュース -------------------------------*/ .waveWrap { position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: 0 auto; width: calc(100% - 12px); height: calc(100% - 6px); border-radius: 0 0 6px 6px; overflow: hidden; } .waveWrap::before { content: ''; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 30%; border-radius: 0 0 4px 4px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); mix-blend-mode: soft-light; } .wave { position: absolute; top: 10%; left: 0; width: 100%; height: 100%; clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z'); animation: wave1 ease 5s infinite; transition: all ease 4s; } .wave::before, .wave::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; } .wave::before { top: 0%; clip-path: path('M0,1.15v78.25h320V1.15C206.2-3.87,122.14,9.73,0,1.15Z'); animation: wave2 ease 6s infinite; background-color: hsla(0, 0%, 100%, 0); } .wave::after { top: 0%; clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z'); animation: wave1 ease 7s infinite; background-color: hsla(0, 0%, 100%, 0); } .glass.soda .wave { background-color: hsla(184, 100%, 83%, 0.8); background-image: radial-gradient(at 15% 25%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 78% 30%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 94% 92%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 11% 87%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 45% 86%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%); } .glass.soda .wave::before { mix-blend-mode: hard-light; background-image: radial-gradient(at 28% 80%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 66% 64%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 94% 28%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 50% 32%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 16% 29%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%); } .glass.soda .wave::after { background-image: radial-gradient(at 25% 51%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 69% 48%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 10% 94%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 90% 90%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 60% 89%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%); } .glass.cola .wave { background-color: hsla(26, 77%, 83%, 0.8); background-image: radial-gradient(at 25% 51%, hsla(18, 74%, 47%, 0.53) 0px, transparent 50%), radial-gradient(at 69% 48%, hsla(18, 100%, 60%, 0.73) 0px, transparent 50%), radial-gradient(at 9% 94%, hsla(18, 77%, 20%, 0.84) 0px, transparent 50%), radial-gradient(at 90% 90%, hsla(0, 88%, 18%, 0.63) 0px, transparent 50%), radial-gradient(at 60% 89%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%); } .glass.cola .wave::before { mix-blend-mode: color-burn; background-image: radial-gradient(at 85% 18%, hsla(18, 74%, 47%, 0.53) 0px, transparent 50%), radial-gradient(at 52% 26%, hsla(18, 100%, 60%, 0.73) 0px, transparent 50%), radial-gradient(at 12% 18%, hsla(18, 56%, 48%, 0.84) 0px, transparent 50%), radial-gradient(at 22% 81%, hsla(5, 73%, 54%, 0.63) 0px, transparent 50%), radial-gradient(at 75% 82%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%); } .glass.cola .wave::after { mix-blend-mode: multiply; background-image: radial-gradient(at 86% 93%, hsla(18, 62%, 27%, 1) 0px, transparent 50%), radial-gradient(at 76% 24%, hsla(14, 73%, 30%, 0.93) 0px, transparent 50%), radial-gradient(at 48% 94%, hsla(1, 53%, 32%, 0.92) 0px, transparent 50%), radial-gradient(at 12% 95%, hsla(0, 52%, 21%, 0.86) 0px, transparent 50%), radial-gradient(at 12% 16%, hsla(0, 47%, 36%, 0.94) 0px, transparent 50%), radial-gradient(at 30% 45%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%); } /*------------------------------- 炭酸 -------------------------------*/ .glass .bubbleWrap { position: absolute; top: 0%; left: 0; width: 100%; height: 125%; overflow: hidden; } .glass .bubble { position: absolute; z-index: 3; bottom: 0; aspect-ratio: 1/1; transition: 1.5s; animation-name: up; animation-iteration-count: infinite; mix-blend-mode: hard-light; } .bubble::before, .bubble::after { content: ''; position: absolute; border-radius: 50%; } .glass.soda .bubble::before, .glass.soda .bubble::after { background: radial-gradient(rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6)); } .glass.cola .bubble::before, .glass.cola .bubble::after { background: radial-gradient(rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2)); } .bubble::before { top: 0; left: 0; width: 100%; height: 100%; } .bubble.sz-s::after { top: 120%; left: -600%; width: 200%; height: 200%; } .bubble.sz-m::after { top: 300%; left: 400%; width: 110%; height: 110%; } .bubble.sz-l::after { top: 300%; left: -500%; width: 60%; height: 60%; } /*------------------------------- サイズ -------------------------------*/ .glass .bubble.sz-l { width: 4%; } .glass .bubble.sz-m { width: 3%; } .glass .bubble.sz-s { width: 2%; } /*------------------------------- 遅延 -------------------------------*/ .glass .bubble.sp-1 { animation-duration: 1.5s; } .glass .bubble.sp-2 { animation-duration: 1.8s; } .glass .bubble.sp-3 { animation-duration: 2.2s; } .glass .bubble.dl-2 { animation-delay: 0.4s; } .glass .bubble.dl-3 { animation-delay: 0.8s; } .glass .bubble.dl-4 { animation-delay: 1.2s; } .glass .bubble.dl-5 { animation-delay: 1.6s; } /*------------------------------- 配置 -------------------------------*/ .glass .bubble:nth-child(1) { right: 0%; } .glass .bubble:nth-child(2) { right: 15%; } .glass .bubble:nth-child(3) { right: 6%; } .glass .bubble:nth-child(4) { right: 12%; } .glass .bubble:nth-child(5) { right: 20%; } .glass .bubble:nth-child(6) { right: 14%; } .glass .bubble:nth-child(7) { right: 20%; } .glass .bubble:nth-child(8) { right: 25%; } .glass .bubble:nth-child(9) { right: 28%; } .glass .bubble:nth-child(10) { right: 33%; } .glass .bubble:nth-child(11) { ri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0