锥型渐变实现流光按钮
最近在公司写年终项目，UI设计稿给了一个背景各种渐变然后在按钮中心旋转的动画效果，市面上大都是边框流光和线性渐变的流光，这里记录一下通过锥形渐变实现的中心旋转流光按钮。
原理
其实和边框，线性渐变的流光按钮没什么不同，都是通过放一个元素写好背景色在按钮下面不停的旋转。
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.dutyStartBtn {
width: 280px;
height: 58px;
border-radius: 33px;
font-size: 21px;
color: #ffffff;
position: relative;
/* 设置溢出隐藏拦截多余部分 */
overflow: hidden;
margin: 100px auto;
}
.dutyStartBtn::after {
/* 通过伪元素实现旋转的锥形渐变背景 */
border-radius: 33px;
content: "";
position: absolute;
width: 100%;
height: 800%;
left: 50%;
top: 50%;
transform: rotate(0deg) translate(-50%, -50%);
background: conic-gradient(
#4a3dff,
#1715ff,
#2226ff,
#00ffff,
#2a4eff,
#2515ff,
#211aff,
#9d2dff,
#c71eff
);
/* 通过高斯模糊调整效果 */
filter: blur(40px);
/* 设置旋转中心点 */
transform-origin: 0 0;
/* 应用旋转动画 */
animation: rotate-bg 5s linear infinite;
}
.btn {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
/* 使文字在背景之上 */
z-index: 1;
}
/* 旋转动画 */
@keyframes rotate-bg {
from {
transform: rotate(0deg) translate(-50%, -50%);
}
to {
transform: rotate(360deg) translate(-50%, -50%);
}
}
</style>
</head>
<body>
<div class="dutyStartBtn">
<div class="btn">流光按钮</div>
</div>
</body>
</html>
