html+css打造流光按钮

最新推荐文章于 2024-05-16 03:09:27 发布

LIMa'o

最新推荐文章于 2024-05-16 03:09:27 发布

阅读量664

点赞数 1

文章标签： css3 html5

本文链接：https://blog.csdn.net/m0_47093563/article/details/105868863

版权

开始颜色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流光按钮</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        body{
            display: flex; justify-content: center; background: black;
            align-items: center; width: 100%; height: 600px;
        }
        button {
            width: 300px; height: 80px; border-radius: 40px;
            background: linear-gradientlinear-(60deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            text-transform: uppercase ; font-size: 30px; color: white;
            background-size: 400%; position: relative;
        }
        button::before {
            content:""; position: absolute; left:-5px;
            top: -5px; bottom: -5px; right: -5px;
            background: linear-gradient(60deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            z-index: -1; border-radius: 40px;filter: blur(20px);
            background-size: 400%;
        }
        button:hover::before {
            animation: hello 8s infinite;
        }
        button:hover {
            animation: hello 8s infinite;
            cursor: pointer;
        }
        @keyframes hello {
            100%{
                background-position: -400% 0;
            }
        }
    </style>
</head>
<body>
    <button>button</button>
</body>
</html>

以上是源代码，在body中自己有一个button，我对button做了居中处理，用的是弹性盒模型display:flex;这个属性是加给了body，然后justify-content: center;主轴居中默认是水平轴，然后再align-items: center;交叉轴居中。
button的样式：设置宽，高，字体颜色，字体大小，线性渐变等，width，height，color，font-size，background：linear-gradient（）
其中button中给的position给个相对定位是为了下面添加伪类来定位参考

button：：before它是流光效果

伪类先加content:" ";否则无法显示，content中是可以加东西的，在这里咱们不加
position给绝对定位以它父级带定位的为参考即button，之后可以给它的top，bottom，left，right各-5px让它比button大点，但要注意button和button：：before的层级问题，要让button的层级高
可以个button：：before加z-index:-1；设置它的background和button一样，在加上模糊度filter: blur();就可以了

以上基本效果就有了，就差帧动画让它动起来了

@keyframes hello，hello为帧动画的名字，之后给button:hover ，button:hover::before加上即可
animation: hello 8s infinite; hello为帧动画的名，8s为帧动画开始到结束8秒，infinite为无限循环

LIMa'o

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html+css打造流光按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流光按钮</title> <style> *{ margin: 0; padding: 0; ...
复制链接

扫一扫