通过伪元素实现下图效果
HTML代码
<a href="#">RABBIT</a>
CSS代码
body { background: #353535;
}a { width: 200px; display: block; position: relative; border: 2px solid #D24D57; margin: 40px auto; padding: 14px 16px; font-size: 20px; color: #fff; text-align: center; text-decoration: none; overflow: hidden;
}a:after { content: ''; display: block; position: absolute; width: 100%; height: 0%; left: 50%; top: 50%; z-index: -1; background: #D24D57; transform: translateX(-50%) translateY(-50%) rotate(-25deg); -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s;
}a:hover:after { height: 300%;
}想要从中间开始扩张开来，需要伪元素设置position: absolute;
然后把top和left都设置成50%，再通过transform的translate设置回-50%。
这个作用是让元素从中心开始发生改变（如果要做改变的话）。
transform: rotate(-25deg)的作用是把伪元素旋转-25度，这样就有倾斜效果了。
最后记得设置伪元素z-index: -1;
这个值的作用是不让伪元素遮住文字层。
a:hover:after { height: 300%;
}当鼠标经过<a>标签时，伪元素的高度发生改变。
作者：滑滑兔
链接：https://www.jianshu.com/p/95bb64eacdbc
随时随地看视频
