超酷炫彩流光 button 按钮
实现效果:
炫彩流光按钮
这是一个普通的 button
<button>Button</button>
button {
width: 200px;
height: 50px;
color: #fff;
background: #222222;
position: relative;
cursor: pointer;
z-index: 1;
border-radius: 10px;
}
添加 before 伪元素,比按钮(四周)多出 4 像素,设置 background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red) 线性渐变,45deg 方向,选择7个颜色,设置 filter: blur(5px) 模糊,放大尺寸 background-size: 1000%,然后添加动画。
button::before {
content: '';
width: 208px;
height: 58px;
background: #222222;
position: absolute;
top: -4px;
left: -4px;
transition: all .35s;
border-radius: 10px;
z-index: -1;
background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red);/*设置线性渐变*/
filter: blur(5px); /*设置模糊*/
background-size: 1000%; /*放大尺寸*/
animation: amSize 40s linear infinite; /*添加动画*/
}
@keyframes amSize {
0% {
background-position: 0 0;
}
100% {
background-position: 1000% 0;
}
}
再添加一个伪元素和按钮(样式)一致,隐藏 ::before,最后添加伪类,在鼠标悬停和按下状态显示或隐藏伪元素
button::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #222222;
cursor: pointer;
border-radius: 10px;
z-index: -1;
}
button::before {
opacity: 0; /*隐藏 ::before*/
}
button:hover::before{
opacity: 1; /*悬停*/
}
button:active::after{
opacity: 0; /*激活(按下)*/
}