水桶容量波纹倒计时效果
代码语言: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: 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 .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); transition: .5s opacity, .5s transform; opacity: 0; } .stage.menu-open button { -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); transition-delay: 0s; opacity: 0; } .stage.menu-open .percent { 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) { transition-delay: .2s; } .stage.menu-open .menu__item:nth-child(2) { transition-delay: .3s; } .stage.menu-open .menu__item:nth-child(3) { transition-delay: .4s; } .stage.menu-open .menu__item:nth-child(4) { 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); 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) { 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: -.5em; left: -.8em; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: rgba(255, 255, 255, 0.5); 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); 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 { 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0