html+css 实现可点击的光影按钮

【代码】前端按钮样式（更新中）

首先去掉按钮默认的边框，调整按钮样式。接下来设置按钮的渐变背景色，使用动画将渐变的背景色动起来产生炫酷的光影效果。进阶，调整渐变色的透明度可影响渐变色之间的过渡距离，改变光影出现的效果。GIF动画中的光影效果被压缩了，明亮效果如截图中所示。每天一个网页小实例，生活多姿又多彩。

html: <!-- 带背景纹理的区域 --> <div class="bgpattern"> <div class="bgpattern_bg"></div> <div class="">https://gravit.io/</div> </div> <!-- 光影划过 --> ...

&::before{ content: ''; position: absolute; z-index: 30; left: -100%; width: 60%; height: 100%; transform: skewX(20deg) translateX(0%);...

/div>

有的时候图片需要加载时间，速度慢的话图片可能会卡住，这个时候用这个css样式让其好看点。

一个旋转光晕的按钮。该效果不仅提升了视觉吸引力，也增强了用户的交互体验。利用 CSS 的强大功能，我们可以轻松实现复杂的动画效果，有兴趣的可以尝试使用起来～专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

CSS（层叠样式表）是一种用于描述网页内容显示样式的标记语言。通过 CSS，我们可以控制网页中各种元素的布局、样式和表现效果，从而实现丰富多彩的网页设计。文字连续光影特效是 CSS 中的一。

这个阴影的话可以根据自己的需要来进行更改里面的值。有了动画后我们运用到span元素里。下面要做的就是让span元素延迟。我们的文字都使用span标签。针对这个标签设置一个颜色。

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群来源：仿生狮子https://juejin.cn/post/6965488051695353886前言总听人说光和影...