演示效果
动画.gif
GIF动画中的光影效果被压缩了，明亮效果如截图中所示
2022-07-15_19-53-52.png
实现思路
首先去掉按钮默认的边框，调整按钮样式。接下来设置按钮的渐变背景色，使用动画将渐变的背景色动起来产生炫酷的光影效果。
进阶，调整渐变色的透明度可影响渐变色之间的过渡距离，改变光影出现的效果。
代码
html结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="green">CSS button！</button>
<button class="blue">CSS 光影按钮</button>
</body>
</html>
css样式
body {
height: 100vh;
background-color: #545454;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 20px;
padding: 15px 25px;
cursor: pointer;
border: 0;
border-radius: 10px;
color: white;
font-size: 20px;
line-height: 1em;
}
button:active {
margin-top: 10px;
}
button.green {
background: linear-gradient(-45deg, #9ccc65 50%, #699833 60%, #9ccc65 70%);
background-size: 600% 100%;
animation: shine 15s linear infinite;
}
button.blue {
background: linear-gradient(-45deg, #69bbef 40%, #1e14a5 50%, #346ad6 60%);
background-size: 600% 100%;
animation: shine 15s linear infinite;
}
@keyframes shine {
0% {
background-position-x: 400%;
}
50% {
background-position-x: 0%;
}
100% {
background-position-x: -400%;
}
}
gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
每天一个网页小实例，生活多姿又多彩。
