2020-12-16

最新推荐文章于 2024-07-10 23:34:24 发布

broken eyebrow

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量282

点赞数

文章标签： css css3 animation

本文链接：https://blog.csdn.net/weixin_46840493/article/details/111224809

版权

css实现流光按钮特效
今天给大家分享一个流光特效按钮，个人觉得还是有一些小帅的；

代码来喽：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光</title>
</head>
<style>
    body {
        background-color: #000;
    }
    
    .but {
        width: 400px;
        height: 100px;
        font-size: 30px;
        color: white;
        line-height: 100px;
        background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 50px;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-transform: uppercase;
        text-align: center;
    }
    
    .but::before {
        content: '';
        position: absolute;
        border-radius: 50px;
        z-index: -1;
        background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
    }
    
    .but:hover {
        animation: run 6s infinite;
        cursor: pointer;
    }
    
    .but:hover::before {
        animation: run 6s infinite;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        filter: blur(20px);
    }
    
    @keyframes run {
        100% {
            background-position: -400% 0;
        }
    }
</style>

<body>
    <a class="but">check up</a>
</body>

</html>

鼠标悬浮到元素上就可以看到效果啦；
来一波效果展示：
在这里插入图片描述
这个是我特意把网页效果做成了gif图片；
如果喜欢的话就自己试试吧；

broken eyebrow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-16

css实现流光按钮特效今天给大家分享一个流光特效按钮，个人觉得还是有一些小帅的；代码来喽：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流光</title>&
复制链接

扫一扫