基于CSS 属性实现按钮悬停边框和背景动画集合

心属性 opacity: .999 使元素产生一个层叠上下文,这样按钮6和8的动画就不会被背景遮盖住了 left/top: -1px 使伪元素与按钮的位置重合,原因在下方 transition-delay 横向与纵向边框动画产生细微的延时效果 z-index: -1 防止动画产生的颜色块盖住按钮的文字 设置了left/top/right/bottom的absolute元素,是相对于父元素的padding-box进行定位的,所以这里伪元素要移动一个边框的距离,才能与按钮的位置重合,否则会出现下面的效果: 可以看到,绿色边框和灰色边框有1px的距离 <div class="main-