CSS技巧专栏：一日一例 12 -纯CSS实现边框上下交错的按钮特效

CSS技巧专栏：一日一例 12 -纯CSS实现边框上下交错的按钮特效

大家好，今天我们来做一个上下边框交错闪动的按钮特效。

本例图片

案例分析

虽说这按钮给人的感觉就是上下两个边框交错变换了位置，但我们都知道border是没法移动的。那么这个按钮是如何实现的呢？你想到了吗？

没错，还是伪元素。利用before和after，可以绘制两个蓝色的边，然后，只要让他们动起来就行了。简单易行！

布局代码

<button class="base ">边框上下交错闪动</button>

基础样式

:root{
  --main-bg-color: #000;
  --color:#000;
  --hover-color:#993399;
}
button{
  margin: 0.3em;
  outline: 0;
  border: none;
}
.base{
  position: relative;   
  padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;  
  line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ 
  font-weight:700