vue实现波纹效果
Simple Vue.js plugin for custom ripple effect.
简单的Vue.js插件可实现自定义波纹效果。
npm i vue-rippler --save
yarn add vue-rippler
jsDelivr , UNPKG , bundle.run
// main.js
import Vue from 'vue'
import VueRippler from 'vue-rippler'
Vue.use(VueRippler)
// .vue template
<template>
<my-component ripple="ripple"></my-component>
</template>
<style>
/*
play with some lines below
*/
[ripple] .ripple--container .ripple--body {
opacity: 0.5 !important;
background-color: rgba(0, 0, 0, 0.1) !important;
-webkit-animation: rippler 1000ms;
animation: rippler 1000ms;
}
</style>
翻译自: https://vuejsexamples.com/simple-vue-js-plugin-for-custom-ripple-effect/
vue实现波纹效果