按钮组件草稿

最新推荐文章于 2024-07-06 14:50:23 发布

郑建零零发

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量56

点赞数

分类专栏： css3 文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_52421092/article/details/126231015

版权

css3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<template>
   <div class="zj-button">
        <div class="button-box">
            <button><a class="a">这个</a></button>
        </div>
    </div>
</template>

<script>
	export default {
		name: 'zj-button',
		data() {
			return {
            };
		},
	}
</script>

<style>
.zj-button {
    width: 100%;
    height: 100%;
}
.zj-button .button-box { 
    position: relative;
    height: 100%;
    width: 100%;
}
.zj-button .button-box button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background-color: #182848;
    z-index: 100;
}
.zj-button .button-box button a {
    text-decoration: none;
    color: #fff;
    background: linear-gradient(-45deg, #ff00c1, #00fff9);
    /* 背景只有文字有   除了文字  其他都被裁剪掉 */
    -webkit-background-clip: text;
    /* 表示文字颜色填充 */
    -webkit-text-fill-color: transparent;
}
.zj-button .button-box .button::after, .button-box::before { 
    content: "";
    width: 110%;
    height: 110%;
    border-radius: 10px;
    box-sizing: border-box;
    position: absolute;
    left: -5%; top: -5%;
    /* var(--rotate) 一个变量  变量名为--rotate*/
    background: linear-gradient(var(--rotate),#FF00c1 0%, #9600ff 25%, #4900ff 50%, #00b8ff 80%, #00fff9 100%);
    z-index: 1;
}

.button-box:hover::after, .button-box:hover::before {
    /* 给变量重新赋值 */
    --rotate: 3600deg;
    /* 过渡 */
    transition: --rotate 20s linear;
}
.button-box:hover::before {
    /* 动画的执行 */
    animation: fade 1.2s;
}

/* 定义一个变量  --rotate   值为130deg   类型为<angle>   不继承 */
@property --rotate { initial-value: 130deg; syntax: '<angle>';  inherits: false; }
/* 定义动画 */
@keyframes fade {
    0% {
        /* 透明度为1 */
        opacity: 1;
        transform: scale(1);
        filter: blur(10px)
    }
    100% { 
        /* 透明度为0 */
        opacity: 0;
        /* 等比例缩放 放大1.2倍 */
        transform: scale(1.2);
        /* 模糊程度 */
        filter: blur(10px)
    }
}