简单的按钮点击波纹动效

最新推荐文章于 2024-08-08 15:41:30 发布

强身健体，清神醒脑

最新推荐文章于 2024-08-08 15:41:30 发布

阅读量464

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_43660626/article/details/111573363

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果展示

<template>
    <div class="zs-btn base-btn ripple" v-ripple @click="$emit('click')">
        <i v-if="icon" :class="icon" class="base-icon"></i>
        <span>{{ title }}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    props: {
        title:{
            type:String,
            default:'标题'
        },
        icon:{
            type:String,
            default:''
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    directives:{
        ripple:{
            inserted(el){
                el.addEventListener('click',(e)=>{
                    let target = e.currentTarget
                    const { left, top } = target.getBoundingClientRect();
                    target.style.setProperty('--x',(e.clientX - left)+'px');
                    target.style.setProperty('--y',(e.clientY - top)+'px');
                })
            }
        }
    },
    methods: {
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
    .base-btn{
        @include flex-row;
        height: 32px;
        background-color: #007CC8;
        border-radius: 6px;
        padding: 0 10px;
        color: white;
        cursor: pointer;
        box-shadow: 0px 2px 4px 0px rgba(73, 114, 197, 0.15);
        .base-icon{
            margin-right: 5px;
        }
    }
    // 按钮波纹
.ripple {
    position: relative;
    overflow: hidden;  /*隐藏溢出的径向渐变背景 */
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

.ripple:active:after {  /*设置初始状态 */
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.ripple::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    transition:.2s;
    background:#fff;
    opacity:0;
}
.ripple:active::before{ 
    opacity:.2;
}
</style>