css流光效果简单版 _css

首先说一下原理：
1：一个大的标签包着4个小标签
2：给小标签给上属性
3：让一边一个小标签
4：用css动画让它们动起来（每个动画只设置0%和100%为的是让他们“跑起来”而且还简单方便）
5：给大标签加上 — （让他们只在大标签上显示）
6:让他们的，高不到他们动的时候变零，轮到他们的时候赋高，宽
7：css倒影属性

文章插图

background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);

代码：
【css流光效果简单版】

流光按钮Surprise@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background: #050801;font-family: 'Raleway', sans-serif;font-weight: bold;}a {position: relative;display: inline-block;padding: 25px 30px;margin: 40px 0;color: #03e9f4;text-decoration: none;text-transform: uppercase;transition: 0.5s;letter-spacing: 4px;overflow: hidden;margin-right: 50px;}a:hover {background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);}a:nth-child(1) {filter: hue-rotate(270deg);}a:nth-child(2) {filter: hue-rotate(110deg);}a span {position: absolute;display: block;}a span:nth-child(1) {top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: animate1 1s linear infinite;}@keyframes animate1 {0% {left: -100%;}50%,100% {left: 100%;}}a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #03e9f4);animation: animate2 1s linear infinite;animation-delay: 0.25s;}@keyframes animate2 {0% {top: -100%;}50%,100% {top: 100%;}}a span:nth-child(3) {bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: animate3 1s linear infinite;animation-delay: 0.50s;}@keyframes animate3 {0% {right: -100%;}50%,100% {right: 100%;}}a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #03e9f4);animation: animate4 1s linear infinite;animation-delay: 0.75s;}@keyframes animate4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}}img {width: 100vw;height: 100vh;position: absolute;display: none;}Neon button



文章插图