炫酷css样式——实现动态按钮效果

jym晚上好，今天实现的是一个按钮动态效果

完整代码已经贴在文末了 我们先写一个div给它命名一个class为linearBorder，内容为稀土掘金；重点就是后面的css了，动态按钮主要是用了CSS的线性渐变（linear-gradient）来实现的边框效果；具体来说，就是通过四个线性渐变，从不同的方向绘制红色的边框线。给每个线性渐变设置宽度。

• 第一个线性渐变指定了从左上角向右的横向渐变。
• 第二个线性渐变指定了从右上角向下的纵向渐变。
• 第三个线性渐变指定了从右下角向左的横向渐变。
• 第四个线性渐变指定了从左下角向上的纵向渐变。

通过background属性将这四个线性渐变应用为div元素的背景。

<div class="linearBorder">稀土掘金</div>
</template>
<script setup >
</script>
<style>
.linearBorder {
    width: 200px;
    height: 80px;
    background:
        linear-gradient(0, red 2px, red 2px) no-repeat left top/0 2px,
        linear-gradient(-90deg, red 2px, red 2px) no-repeat right top/2px 0,
        linear-gradient(-180deg, red 2px, red 2px) no-repeat right bottom/0 2px,
        linear-gradient(-270deg, red 2px, red 2px) no-repeat left bottom/2px 0;
    cursor: pointer;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    color: rgb(34, 31, 31);
    transition: all 1000ms;
    padding: 10px;
}

.linearBorder:hover {
     background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
 }
</style>

第二个关键点就是动画效果了，我们在:hover伪类中定义了一个过渡效果（transition），持续时间为1秒（1000毫秒）。当鼠标悬停在div元素上时，使用background-size属性将边框线的大小设置为100% 2px、2px 100%，从而展示出完整的边框效果；

     background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
 }

到这里就可以完全实现了；马上中秋节了，祝jym，丹桂飘香又中秋，花好月圆人长久；秋风送祝福，明月寄相思；举杯邀明月，天涯共此时；欢乐中秋，欢乐人生。愿我的祝福为你带去温暖：中秋节快乐！

求点赞收藏评论转发！

下面是完整代码：

<div class="linearBorder">稀土掘金</div>
</template>
<script setup >
</script>
<style>
.linearBorder {
    width: 200px;
    height: 80px;
    background:
        linear-gradient(0, red 2px, red 2px) no-repeat left top/0 2px,
        linear-gradient(-90deg, red 2px, red 2px) no-repeat right top/2px 0,
        linear-gradient(-180deg, red 2px, red 2px) no-repeat right bottom/0 2px,
        linear-gradient(-270deg, red 2px, red 2px) no-repeat left bottom/2px 0;
    cursor: pointer;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    color: rgb(34, 31, 31);
    transition: all 1000ms;
    padding: 10px;
}

.linearBorder:hover {
     background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
 }
</style>