v-ripple-directive
Version:
Vue.js directive for ripple effect
2 lines (1 loc) • 945 B
CSS
:root{--v-ripple-color: #fff;--v-ripple-duration: 2s;--v-ripple-opacity: .32;--v-ripple-scale-start: .32;--v-ripple-scale-end: 24}.v-ripple{position:absolute;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:inherit}.v-ripple__wave{position:absolute;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:scale(var(--v-ripple-scale-start, .32));transform:scale(var(--v-ripple-scale-start, .32));background:var(--v-ripple-color, #fff);opacity:var(--v-ripple-opacity, .32);-webkit-animation:ripple var(--v-ripple-duration, 2s) forwards;animation:ripple var(--v-ripple-duration, 2s) forwards}@-webkit-keyframes ripple{to{-webkit-transform:scale(var(--v-ripple-scale-end, 24));transform:scale(var(--v-ripple-scale-end, 24));opacity:0}}@keyframes ripple{to{-webkit-transform:scale(var(--v-ripple-scale-end, 24));transform:scale(var(--v-ripple-scale-end, 24));opacity:0}}