css-赛博朋克风动画组件

本文主要是介绍css-赛博朋克风动画组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css-赛博朋克风动画组件目录

文章目录

前言
结果展示
代码

前言

Tutorials收费课程中的一种实现。
实现思路：
- 先绘制盒子
- 制作动画，通过颜色位置变化来实现流转
- -webkit-box-reflect: below 2px linear-gradient(transparent,#0005);实现倒影
所用功能：
- border-sizing
- justify-content
- display
- overflow
- transition
- -webkit-box-reflect
- box-shadow
- animation

结果展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cyberpunk Button</title><style>*{margin: 0;padding: 0;font-family: consolas;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #050801;}a{position: relative;display: inline-block;padding: 25px 30px;margin: 0 20px;color: #03e9f4;text-transform: uppercase;letter-spacing: 4px;text-decoration: none;font-size: 24px;overflow: hidden;transition: 0.5s;-webkit-box-reflect: below 2px linear-gradient(transparent,#0005);}a:hover{background: #03e9f4;color: #050801;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;}a span{position: absolute;display: block;}a span:nth-child(1){top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg,transparent,#03e9f4);animation: animate1 1s linear infinite;animation-delay: 0s;}@keyframes animate1{0%{left: -100%;}50%,100%{left: 100%;}}a span:nth-child(3){bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg,transparent,#03e9f4);animation: animate3 1s linear infinite;animation-delay: 0.5s;}@keyframes animate3{0%{right: -100%;}50%,100%{right: 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(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%;}}a:nth-child(1){filter: hue-rotate(290deg);}a:nth-child(3){filter: hue-rotate(110deg);}</style>
</head>
<body>
<a href="#"><span></span><span></span><span></span><span></span>btn1
</a>
<a href="#"><span></span><span></span><span></span><span></span>btn2
</a>
<a href="#"><span></span><span></span><span></span><span></span>btn3
</a>
</body>
</html>