炫彩流光按钮
做这个的话主要就是利用了基础的html css以及css3的渐变背景以及关键帧动画
基本结构如下：
button基本样式如下：
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
body {
height: 100vh;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
background-color: #000;
}
.btn {
position: relative;
display: inline-block;
width: 220px;
height: 80px;
line-height: 80px;
font-size: 35px;
text-transform: uppercase;
text-align: center;
border-radius: 30px;
/* 渐变背景 */
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
z-index: 1;
/* 设置文字阴影
这里写两行是为了让字体给人的感觉是更亮 */
text-shadow: 0 0 5px white,
0 0 5px white;
}
鼠标经过时的动画效果：
/* 鼠标经过时的动画效果 */
.btn:hover {
animation: move 5s linear alternate infinite;
}
@keyframes move {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}定义盒子周围的光晕：
/* 定义盒子周围的光晕 */
.btn::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 240px;
height: 100px;
/* 渐变背景 */
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(243,169,10),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
opacity: 0;
z-index: -1;
border-radius: 45px;
transform: .6s;
}
.btn:hover::before {
/* 设置高斯模糊 */
filter: blur(15px);
opacity: 1;
animation: move 8s linear alternate infinite;
}
源码：
Document
button
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
body {
height: 100vh;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
background-color: #000;
}
.btn {
position: relative;
display: inline-block;
width: 220px;
height: 80px;
line-height: 80px;
font-size: 35px;
text-transform: uppercase;
text-align: center;
border-radius: 30px;
/* 渐变背景 */
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
z-index: 1;
/* 设置文字阴影
这里写两行是为了让字体给人的感觉是更亮 */
text-shadow: 0 0 5px white,
0 0 5px white;
}
/* 鼠标经过时的动画效果 */
.btn:hover {
animation: move 5s linear alternate infinite;
}
@keyframes move {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
/* 定义盒子周围的光晕 */
.btn::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 240px;
height: 100px;
/* 渐变背景 */
background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(243,169,10),rgb(226,20,233),rgb(16,172,219));
background-size: 400%;
opacity: 0;
z-index: -1;
border-radius: 45px;
transform: .6s;
}
.btn:hover::before {
/* 设置高斯模糊 */
filter: blur(15px);
opacity: 1;
animation: move 8s linear alternate infinite;
}