记录_流光按钮

最新推荐文章于 2024-07-11 22:14:24 发布

米津茶太

最新推荐文章于 2024-07-11 22:14:24 发布

阅读量264

点赞数 1

文章标签： css js html5

本文链接：https://blog.youkuaiyun.com/SCCSCSC/article/details/124136686

版权

流光按钮

一、html

<a href="#">BUTTON</a>

二、css

*{
    /* 初始化，取消页面内外边距*/
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000000;
}

a{
    position: relative;
    width: 400px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
    color: #ffffff;
    background: linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);
    background-size: 400%;
    border-radius: 50px;
    z-index: 1;
}


/*发光效果*/
a::before{
    content: "";
    position: absolute;
    top: -5px;
    left:  -5px;
    bottom: -5px;
    right: -5px;

    background: linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);
    background-size: 400%;
    border-radius: 50px;
    z-index: -1;
    /*设置周围模糊度，显示周围发光效果*/
    filter: blur(20px);
}

a:hover{
    /*动画： 名词 时间 infinite 是无限次播放*/
    animation: streamer 8s infinite;
}

a:hover::before{
    animation: streamer 8s infinite;
}

/*定义动画*/
@keyframes streamer {
    100%{
        background-position: -400%, 0;
    }

}