利用div+css3实现一个背景渐变的button按钮的示例代码

    随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用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;
    }

    效果如下:

    到此这篇关于利用div+css3实现一个背景渐变的button按钮的示例代码的文章就介绍到这了,更多相关div+css3背景渐变按钮内容请搜索lingkb以前的文章或继续浏览下面的相关文章,希望大家以后多多支持lingkb!

发表评论

发表评论