vue实现一个杯子液体波动倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:vue实现一个杯子液体波动倒计时动画效果代码,多种颜色和效果组合
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:100,400"); *, *::after, *::before { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; font-family: "Roboto", sans-serif; background: linear-gradient(to bottom right, #c8c897, #6590A2); } [v-cloak] { display: none; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ::-webkit-scrollbar { display: none; } .stage { position: relative; overflow: hidden; width: 100%; height: 100%; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); background: #1E384C; transition: background-color 0.3s; } @media (min-width: 500px) { .stage { border-radius: 5px; max-height: 550px; max-width: 350px; } } .stage.menu-open .microphone { transform: translate3d(-1em, 0, 0); opacity: 0; } .stage.menu-open .voices-menu__button { z-index: 40; transform: translate3d(0, 0, 0); opacity: 1; } .stage.menu-open .menu { z-index: 25; } .stage.menu-open .time { transform: translate3d(0, -200%, 0); transition: 0.5s opacity, 0.5s transform; opacity: 0; } .stage.menu-open button { transform: translate3d(0, 200%, 0); transition-delay: 0s; opacity: 0; } .stage.menu-open .percent { transition: 0.4s opacity, 0.4s transform; transform: translate3d(0, 50%, 0); opacity: 0; } .stage.menu-open .menu__item { opacity: 1; transform: translate3d(0, 0, 0); } .stage.menu-open .menu__item:nth-child(1) { transition-delay: 0.2s; } .stage.menu-open .menu__item:nth-child(2) { transition-delay: 0.3s; } .stage.menu-open .menu__item:nth-child(3) { transition-delay: 0.4s; } .stage.menu-open .menu__item:nth-child(4) { transition-delay: 0.5s; } .stage.voices-open .voices-menu { z-index: 35; } .stage.voices-open .voices-menu__bg { transform: scale(6); } .stage.voices-open .voices-menu__close { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } .stage.voices-open .voices-list-wrapper { opacity: 1; } .stage.voices-open .voices-list__item { opacity: 1; transform: translate(0, 0); transition: opacity 0.15s, transform 0.2s; } .stage.voices-open .voices-list__item:nth-child(1) { transition-delay: 75ms; } .stage.voices-open .voices-list__item:nth-child(2) { transition-delay: 150ms; } .stage.voices-open .voices-list__item:nth-child(3) { transition-delay: 225ms; } .stage.voices-open .voices-list__item:nth-child(4) { transition-delay: 300ms; } .stage.voices-open .voices-list__item:nth-child(5) { transition-delay: 375ms; } .stage.voices-open .voices-list__item:nth-child(6) { transition-delay: 450ms; } .stage.voices-open .voices-list__item:nth-child(7) { transition-delay: 525ms; } .stage.voices-open .voices-list__item:nth-child(8) { transition-delay: 600ms; } .stage.voices-open .voices-list__item:nth-child(9) { transition-delay: 675ms; } .stage.voices-open .voices-list__item:nth-child(10) { transition-delay: 750ms; } .microphone { z-index: 30; position: absolute; top: -0.5em; left: -0.8em; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: rgba(255, 255, 255, 0.5); transition: opacity 0.3s, transform 0.3s, color 0.2s; } .microphone:hover { color: rgba(255, 255, 255, 0.8); } .microphone svg { z-index: 2; position: relative; font-size: 2em; width: 1em; height: 1em; } .microphone:before, .microphone:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; } .microphone:after { z-index: 1; background: rgba(255, 255, 255, 0.1); transition: opacity 0.3s; } .microphone:before { z-index: 2; border: 3px solid rgba(255, 255, 255, 0.1); opacity: 0; } .microphone.is-listening { color: #d82e2e; } .microphone.is-listening:before { -webkit-animation: pulseAway 1s infinite; animation: pulseAway 1s infinite; } .microphone.is-listening:after { opacity: 1; -webkit-animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite; } .microphone .voice-tooltip { position: absolute; top: 110%; left: 25px; padding: 0.4em 0.6em; color: rgba(255, 255, 255, 0.8); font-size: 0.8em; font-weight: 300; text-transform: uppercase; white-space: nowrap; background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .microphone .voice-tooltip:before { content: ""; position: absolute; bottom: 100%; left: 5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent; } .fade-enter-active, .fade-leave-active { transition: all 0.15s ease; } .fade-enter, .fade-leave-to { opacity: 0; } .voices-menu { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media (min-width: 500px) { .voices-menu { border-radius: 5px; overflow: hidden; } } .voices-menu__bg { position: absolute; top: -15em; left: -15em; transform-origin: 50% 50%; width: 20em; height: 20em; color: #222; transform: scale(0.2); transition: transform 0.3s; } .voices-menu__button { position: absolute; top: 0; left: 0; padding: 0.8em 0.6em; color: rgba(255, 255, 255, 0.5); opacity: 0; cursor: pointer; transform: translate3d(1em, 0, 0); transition: opacity 0.3s, transform 0.3s, color 0.2s; } .voices-menu__button:hover { color: rgba(255, 255, 255, 0.8); } .voices-menu__button > * { vertical-align: middle; font-weight: 300; letter-spacing: 1px; } .voices-menu__button svg { width: 1.8em; height: 1.8em; } .voices-menu__close { position: absolute; top: 0; right: 0; padding: 10px 10px; font-size: 2em; font-weight: 300; color: rgba(255, 255, 255, 0.5); opacity: 0; cursor: pointer; transform: translate3d(1em, 0, 0) rotate(45deg); transition: opacity 0.3s, transform 0.3s, color 0.2s; } .voices-menu__close svg { width: 1em; height: 1em; } .voices-menu__close:hover { color: rgba(255, 255, 255, 0.8); } .voices-list-wrapper { position: absolute; top: 60px; left: 0; bottom: 0; right: 0; overflow-y: auto; opacity: 0; } .voices-list { margin: 0; padding: 0; } .voices-list__item { display: block; opacity: 0; transform: translate(0, 1em); } .voices-list__item.is-selected .voices-list__icon { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } .voices-list__icon { position: relative; margin-right: 20px; color: #02C39A; opacity: 0; transform: translate3d(-1em, 0, 0) rotate(-30deg); transition: opacity 0.2s, transform 0.2s; } .voices-list__icon svg { width: 1.2em; height: 1.2em; } .voices-list__link { display: flex; padding: 0.5em 1.1em; font-size: 1.3em; font-weight: 300; color: rgba(255, 255, 255, 0.8); text-decoration: none; } .voices-list__link:hover { background: rgba(255, 255, 255, 0.05); } .voices-list__link span { display: inline-block; vertical-align: middle; } .voices-list__content { line-height: 1; } .voices-list__content span { font-size: 0.5em; } .voices-list__default { color: #02C39A; } .menu { z-index: 10; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .menu__button { z-index: 30; position: absolute; top: 0; right: 0; display: inline-block; padding: 1.5em 1em; cursor: pointer; } .menu__button:hover .menu__dot, .menu__button:hover .menu__dot:before, .menu__button:hover .menu__dot:after { background: rgba(255, 255, 255, 0.8); } .menu__dot { position: relative; border-radius: 50%; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.5); transition: background 0.2s; } .menu__dot:before, .menu__dot:after { position: absolute; content: ""; border-radius: 50%; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.5); transition: background 0.2s; } .menu__dot:before { top: 10px; } .menu__dot:after { bottom: 10px; } .menu__list { list-style: none; padding: 0; margin: 0; width: 100%; } .menu__item { overflow: hidden; opacity: 0; transform: translate3d(0, 100%, 0); transition: 0.4s transform, 0.4s opacity; } .menu__item a { font-size: 1.8em; font-weight: 300; display: block; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; text-decoration: none; padding: 0.5em 1.5em; } .menu__item a span { display: inline-block; vertical-align: middle; transition: transform 0.3s; } .menu__item a:hover svg, .menu__item a:focus svg { transform: scale(1.2); } .menu__item a:hover .water-glass__water, .menu__item a:focus .water-glass__water { fill: #32BAFA; transform: scale(1, 0.8); } .menu__item a:hover .coffee-cup__coffee, .menu__item a:focus .coffee-cup__coffee { fill: #BF9E87; transform: scale(1, 0.8); } .menu__item a:hover .beer-glass__beer, .menu__item a:focus .beer-glass__beer { fill: #E18E02; transform: scale(1, 0.8); } .menu__item a:hover .clock__short, .menu__item a:focus .clock__short { fill: #02C39A; transform-origin: 0% 50%; transform: rotate(20deg); transition: transform 1s, color 0.2s; } .menu__item a:hover .clock__long, .menu__item a:focus .clock__long { fill: #02C39A; transition: transform 1s, color 0.2s; transform-origin: 50% 95%; transform: rotate(360deg); } .menu__item svg { display: inline-block; vertical-align: middle; width: 1em; height: 1em; margin-right: 1em; transition: transform 0.3s; } .menu__item svg path { fill: #fff; transition: all 0.3s; transform-origin: 100% 100%; } .browser-support { color: #fff; font-size: 0.8rem; text-align: center; padding: 0.5rem; } .content { z-index: 20; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .time { overflow: hidden; padding: 1em; font-size: 1.1em; text-align: center; transition: 0.5s 0.2s opacity, 0.5s transform 0.2s; } .timer__item { transition: all 1s; margin-right: 10px; color: rgba(255, 255, 255, 0.8); } .timer__item:first-child, .timer__item:nth-child(3) { color: rgba(255, 255, 255, 0.2); } .timer-enter, .timer-leave-to { opacity: 0; transform: translate3d(0, -100%, 0); } .timer-leave-to { transition-duration: 0.5s; } .timer-leave-active { transform: translate3d(0, 0, 0); } .percent { z-index: 2; position: relative; font-size: 7em; font-weight: 100; color: rgba(255, 255, 255, 0.7); transition: 0.4s 0.2s opacity, 0.4s 0.2s transform; } .percent > div { display: inline-block; } .percent > span { margin-left: -0.4em; font-size: 0.5em; } .percent-left-enter-active, .percent-left-leave-active { transition: transform 0.1s ease; } .percent-left-enter, .percent-left-leave-to { transform: scale(1.05); } button { z-index: 20; position: absolute; display: block; width: 70%; margin: auto; left: 0; right: 0; bottom: 1.5em; padding: 0.6em; color: rgba(255, 255, 255, 0.8); font-size: 1.1em; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; background: transparent; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 2em; outline: none; transition: 0.2s background, 0.4s 0.3s transform, 0.4s 0.3s opacity; cursor: pointer; } button:hover { background: #fff; color: currentColor; } .waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transition: 0.4s transform ease; transform-origin: bottom center; } @media (min-width: 500px) { .waves { border-radius: 5px; } } .wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-animation: wave 1s linear infinite; animation: wave 1s linear infinite; } .wave--front { z-index: 2; color: #32BAFA; } .wave--back { z-index: 1; color: #2C7FBE; animation-direction: reverse; } .water { position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: currentColor; } .water svg { position: absolute; width: 100%; left: 0; right: 0; bottom: 99.9%; } .water:first-of-type { transform: translate(-100%, 0); } svg { fill: currentColor; } @-webkit-keyframes wave { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(50%, 0.5em, 0); } 100% { transform: translate3d(100%, 0, 0); } } @keyframes wave { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(50%, 0.5em, 0); } 100% { transform: translate3d(100%, 0, 0); } } @-webkit-keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @-webkit-keyframes pulseAway { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; } 100% { transform: scale(1.4); } } @keyframes pulseAway { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; } 100% { transform: scale(1.4); } } </style> </head> <body> <div id="stage" class="stage" :class="{'menu-open': menuOpen, 'voices-open': voicesOpen}" :style="{ color: activeReminder.waveFrontColor, backgroundColor: stageBg }" v-cloak> <div class="menu__button" @click="toggleMenu"> <div class="menu__dot"></div> </div> <div class="microphone" v-if="supportSpeechRecognition" :class="{'is-listening': isListening }" @click="startListenVoiceCommands"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 16c2.206 0 4-1.795 4-4v-6c0-2.206-1.794-4-4-4s-4 1.794-4 4v6c0 2.205 1.794 4 4 4z"></path> <path d="M19 12v-2c0-0.552-0.447-1-1-1s-1 0.448-1 1v2c0 2.757-2.243 5-5 5s-5-2.243-5-5v-2c0-0.552-0.447-1-1-1s-1 0.448-1 1v2c0 3.52 2.613 6.432 6 6.92v1.080h-3c-0.553 0-1 0.447-1 1s0.447 1 1 1h8c0.553 0 1-0.447 1-1s-0.447-1-1-1h-3v-1.080c3.387-0.488 6-3.4 6-6.92z"></path> </svg> <div class="voice-tooltip" v-show="isListening"> <transition name="fade" mode="out-in"> <span :key="tooltipText">{{ tooltipText }}</span> </transition> </div> </div> <div class="voices-menu"> <svg class="voices-menu__bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>sphere</title><circle cx="25" cy="25" r="25"/></svg> <div class="voices-menu__button" @click="toggleVoicesMenu"> <svg xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"> <path d="M523.5 448.5h108c4.5-21 9-42 9-64.5s-4.5-43.5-9-64.5h-108c3 21 4.5 42 4.5 64.5s-1.5 43.5-4.5 64.5zM466.5 625.5c58.5-19.5 109.5-61.5 139.5-114h-94.5c-10.5 40.5-25.5 78-45 114zM459 448.5c3-21 4.5-42 4.5-64.5s-1.5-43.5-4.5-64.5h-150c-3 21-4.5 42-4.5 64.5s1.5 43.5 4.5 64.5h150zM384 639c27-39 48-81 61.5-127.5h-123c13.5 46.5 34.5 88.5 61.5 127.5zM256.5 256.5c10.5-40.5 25.5-78 45-114-58.5 19.5-109.5 61.5-139.5 114h94.5zM162 511.5c30 52.5 81 94.5 139.5 114-19.5-36-34.5-73.5-45-114h-94.5zM136.5 448.5h108c-3-21-4.5-42-4.5-64.5s1.5-43.5 4.5-64.5h-108c-4.5 21-9 42-9 64.5s4.5 43.5 9 64.5zM384 129c-27 39-48 81-61.5 127.5h123c-13.5-46.5-34.5-88.5-61.5-127.5zM606 256.5c-30-52.5-81-94.5-139.5-114 19.5 36 34.5 73.5 45 114h94.5zM384 64.5c177 0 319.5 142.5 319.5 319.5s-142.5 319.5-319.5 319.5-319.5-142.5-319.5-319.5 142.5-319.5 319.5-319.5z"></path> </svg> <span>Select voice</span> </div> <div class="voices-menu__close" @click="toggleVoicesMenu"> <svg xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"> <path d="M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"></path> </svg> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0