用CSS3实现按钮动态渐变效果的方法

发布时间：2023-10-26 15:21:10 所属栏目：语言来源：

导读：随着目前前端页面的需求不断提升，有些场景需要渐变背景的元素。本文利用div和css3新属性，实现了一个背景渐变的按钮，具体如下：

1.background: linear-gradient 背景为渐变色属性

2.利用css3中动画特性ani

随着目前前端页面的需求不断提升，有些场景需要渐变背景的元素。本文利用div和css3新属性，实现了一个背景渐变的按钮，具体如下：

1.background: linear-gradient 背景为渐变色属性

2.利用css3中动画特性animation，实现背景从左至右变化（color_move）

3.为了实现渐变效果，将background的宽度拉长至400%

上代码：

html：

<div class="btn_demo">

<div class="text">体验</div>

<div class="arrow">»</div>

</div>

css:

@keyframes arrow_move {

   /* 开始状态 */

    0% {

        left: 130px;

    }

/* 结束状态 */

    100% {

        left: 140px;

    }

}

@keyframes color_move {

    /* 开始状态 */

    0% {

        background-position: 0% 0%; /* 水平位置垂直位置 */

    }

    50% {

        background-position: 50% 0%;

    }

/* 结束状态 */

    100% {

        background-position: 100% 0%;

    }

}

.btn_demo {

    width:180px;

    height:60px;

    border-radius: 10px;

    position: relative;

    background: linear-gradient( 90deg, #373d42 0%, #2679dd 50%, #373d42 100%);

    background-size: 400% 100%;

    animation: color_move 5s infinite ease-in-out alternate;

    cursor: pointer;

}

.btn_demo:hover {

    background: #2679dd;

}

.btn_demo:active {

    background: #373d42;

}

.btn_demo > .text {

    /* background: yellow; */

    width: 50px;

    text-align: center;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    font-size: 20px;

    color: #fff;

    font-weight: bold;

}

.btn_demo > .arrow {

    /* background: green; */

    width: 20px;

    text-align: center;

    position: absolute;

    font-size: 30px;

    color: #fff;

    top: 46%;

    transform: translateY(-50%);

    left: 130px; /* 移动130~150px */

    /* 调用动画 */

    animation-name: arrow_move;

    /* 持续时间 */

    animation-duration: 1s;

    /* 无限播放 */

    animation-iteration-count: infinite;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!