带语音播报倒计时的水面波纹流动动画效果
代码语言:html
所属分类:动画
代码描述:带语音播报倒计时的水面波纹流动动画效果,有剩余量、多种液体选择,水、咖啡、啤酒等
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-family: 'Roboto', sans-serif; background: -webkit-gradient(linear, left top, right bottom, from(#c8c897), to(#6590A2)); 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; -webkit-transition: background-color .3s; transition: background-color .3s; } @media (min-width: 500px) { .stage { border-radius: 5px; max-height: 550px; max-width: 350px; } } .stage.menu-open .microphone { -webkit-transform: translate3d(-1em, 0, 0); transform: translate3d(-1em, 0, 0); opacity: 0; } .stage.menu-open .voices-menu__button { z-index: 40; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .stage.menu-open .menu { z-index: 25; } .stage.menu-open .time { -webkit-transform: translate3d(0, -200%, 0); transform: translate3d(0, -200%, 0); -webkit-transition: .5s opacity, .5s transform; transition: .5s opacity, .5s transform; opacity: 0; } .stage.menu-open button { -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .stage.menu-open .percent { -webkit-transition: .4s opacity, .4s transform; transition: .4s opacity, .4s transform; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); opacity: 0; } .stage.menu-open .menu__item { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .stage.menu-open .menu__item:nth-child(1) { -webkit-transition-delay: .2s; transition-delay: .2s; } .stage.menu-open .menu__item:nth-child(2) { -webkit-transition-delay: .3s; transition-delay: .3s; } .stage.menu-open .menu__item:nth-child(3) { -webkit-transition-delay: .4s; transition-delay: .4s; } .stage.menu-open .menu__item:nth-child(4) { -webkit-transition-delay: .5s; transition-delay: .5s; } .stage.voices-open .voices-menu { z-index: 35; } .stage.voices-open .voices-menu__bg { -webkit-transform: scale(6); transform: scale(6); } .stage.voices-open .voices-menu__close { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0); transform: translate3d(0, 0, 0) rotate(0); } .stage.voices-open .voices-list-wrapper { opacity: 1; } .stage.voices-open .voices-list__item { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: opacity .15s, -webkit-transform .2s; transition: opacity .15s, -webkit-transform .2s; transition: opacity .15s, transform .2s; transition: opacity .15s, transform .2s, -webkit-transform .2s; } .stage.voices-open .voices-list__item:nth-child(1) { -webkit-transition-delay: 75ms; transition-delay: 75ms; } .stage.voices-open .voices-list__item:nth-child(2) { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .stage.voices-open .voices-list__item:nth-child(3) { -webkit-transition-delay: 225ms; transition-delay: 225ms; } .stage.voices-open .voices-list__item:nth-child(4) { -webkit-transition-delay: 300ms; transition-delay: 300ms; } .stage.voices-open .voices-list__item:nth-child(5) { -webkit-transition-delay: 375ms; transition-delay: 375ms; } .stage.voices-open .voices-list__item:nth-child(6) { -webkit-transition-delay: 450ms; transition-delay: 450ms; } .stage.voices-open .voices-list__item:nth-child(7) { -webkit-transition-delay: 525ms; transition-delay: 525ms; } .stage.voices-open .voices-list__item:nth-child(8) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .stage.voices-open .voices-list__item:nth-child(9) { -webkit-transition-delay: 675ms; transition-delay: 675ms; } .stage.voices-open .voices-list__item:nth-child(10) { -webkit-transition-delay: 750ms; transition-delay: 750ms; } .microphone { z-index: 30; position: absolute; top: -.5em; left: -.8em; width: 70px; height: 70px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; cursor: pointer; color: rgba(255, 255, 255, 0.5); -webkit-transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, transform .3s, color .2s; transition: opacity .3s, transform .3s, color .2s, -webkit-transform .3s; } .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); -webkit-transition: opacity .3s; transition: opacity .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: .4em .6em; color: rgba(255, 255, 255, 0.8); font-size: .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 { -webkit-transition: all .15s ease; transition: all .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; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 20em; height: 20em; color: #222; -webkit-transform: scale(0.2); transform: scale(0.2); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .voices-menu__button { position: absolute; top: 0; left: 0; padding: .8em .6em; color: rgba(255, 255, 255, 0.5); opacity: 0; cursor: pointer; -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); -webkit-transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, transform .3s, color .2s; transition: opacity .3s, transform .3s, color .2s, -webkit-transform .3s; } .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; -webkit-transform: translate3d(1em, 0, 0) rotate(45deg); transform: translate3d(1em, 0, 0) rotate(45deg); -webkit-transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, color .2s, -webkit-transform .3s; transition: opacity .3s, transform .3s, color .2s; transition: opacity .3s, transform .3s, color .2s, -webkit-transform .3s; } .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; -webkit-transform: translate(0, 1em); transform: translate(0, 1em); } .voices-list__item.is-selected .voices-list__icon { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0); transform: translate3d(0, 0, 0) rotate(0); } .voices-list__icon { position: relative; margin-right: 20px; color: #02C39A; opacity: 0; -webkit-transform: translate3d(-1em, 0, 0) rotate(-30deg); transform: translate3d(-1em, 0, 0) rotate(-30deg); -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s, -webkit-transform .2s; } .voices-list__icon svg { width: 1.2em; height: 1.2em; } .voices-list__link { display: -webkit-box; display: flex; padding: .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: .5em; } .voices-list__default { color: #02C39A; } .menu { z-index: 10; position: absolute; width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: 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); -webkit-transition: background .2s; transition: background .2s; } .menu__dot:before, .menu__dot:after { position: absolute; content: ''; border-radius: 50%; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.5); -webkit-transition: background .2s; transition: background .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; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: .4s transform, .4s opacity; transition: .4s transform, .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: .5em 1.5em; } .menu__item a span { display: inline-block; vertical-align: middle; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .menu__item a:hover svg, .menu__item a:focus svg { -webkit-transform: scale(1.2); transform: scale(1.2); } .menu__item a:hover .water-glass__water, .menu__item a:focus .water-glass__water { fill: #32BAFA; -webkit-transform: scale(1, 0.8); transform: scale(1, 0.8); } .menu__item a:hover .coffee-cup__coffee, .menu__item a:focus .coffee-cup__coffee { fill: #BF9E87; -webkit-transform: scale(1, 0.8); transform: scale(1, 0.8); } .menu__item a:hover .beer-glass__beer, .menu__item a:focus .beer-glass__beer { fill: #E18E02; -webkit-transform: scale(1, 0.8); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0