思路很简单，实现方法有很多很多。但是大体思路与实现方法都类似：渐变色 + 动画，主要区别在动画的具体实现
0、HTML 结构
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>流光按钮</title></head><body><divclass="wrapper"><divclass="btn">按钮</div></div></body></html>
1-1、CSS 实现一
<style>*{padding: 0;margin: 0;}@property --rotate{syntax:"<angle>";initial-value: 20deg;inherits: false;}body{background-color:rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color:rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content:"";inset: -20px;background:linear-gradient(var(--rotate), transparent 1%,rgb(255, 0, 191), #00b7ff,rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content:"";position: absolute;border-radius: 8px;background-color:rgb(41, 41, 41);inset: 3px;z-index: -1;}@keyframes spin{0%{--rotate: 0deg;}100%{--rotate: 360deg;}}</style>
1-2、CSS 实现二
<style>*{padding: 0;margin: 0;}body{background-color:rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color:rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content:"";inset: -20px;background:linear-gradient(0deg, transparent 1%,rgb(255, 0, 191), #00b7ff,rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content:"";position: absolute;border-radius: 8px;background-color:rgb(41, 41, 41);inset: 3px;z-index: -1;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style>
本文转载自: https://blog.csdn.net/qq_45020818/article/details/132570391
版权归原作者 薛定谔的壳 所有， 如有侵权，请联系我们删除。
版权归原作者 薛定谔的壳 所有， 如有侵权，请联系我们删除。