按钮模版:btn-2
效果展示
实现思路
为了动画初始化的时候,四条边不会同时显示,通过绝对定位隐藏其他三条边
使用了 @keyframes
定义了四个不同方向上的动画变化效果:toTop、toBottom、toLeft、toRight
每个 <span>
标签代表按钮中的一条边,分别使用了 nth-child
来定位,并分别应用了不同的动画
这个动画的核心便是动画延迟的应用,整个动画的时长是 1s,那么每个动画的延迟相差 0.25s 是最优解
然后安装动画顺序进行叠加就可以了
实现代码
1 2 3 4 5 6 7
| <button class="btn-2"> <span></span> <span></span> <span></span> <span></span> BTN-2 </button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
| @keyframes toTop { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } } @keyframes toBottom { 0% { top: -100%; } 50%, 100% { top: 100%; } } @keyframes toLeft { 0% { right: -100%; } 50%, 100% { right: 100%; } } @keyframes toRight { 0% { left: -100%; } 50%, 100% { left: 100%; } } .btn-2 { position: relative; padding: 16px 28px; color: #03e9f4; background: transparent; letter-spacing: 4px; overflow: hidden; transition: 0.5s; border: none; cursor: pointer; } .btn-2:hover { background: #03e9f4; color: #000; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; } .btn-2 span { position: absolute; display: block; } .btn-2 span:nth-child(1) { top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: toRight 1s linear infinite; } .btn-2 span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: toBottom 1s linear infinite; animation-delay: 0.25s; } .btn-2 span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: toLeft 1s linear infinite; animation-delay: 0.50s; } .btn-2 span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: toTop 1s linear infinite; animation-delay: 0.75s; }
|