# 一个简单的CSS圆形缩放动画 外层的a标签用于整体容器和跳转，内层的i标签使用伪元素`::before`和`::after`分别作为背景色和前景色，这两个伪元素均绝对定位，垂直水平居中，`::after`设置缩放属性`transform:scale(0)`,过渡动画属性`transition: all .3s`，正常情况下`::before`可见，当`hover`的时候`::after`设置缩放属性`transform:scale(1)`，两个相邻绝对定位元素在不设置`z-index`的情况下，文档流在后的元素在上，并且在有过渡动画属性transition的情况下实现了缩放动画效果。 <iframe width="100%" height="300" src="//jsrun.net/LQqKp/embedded/all/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 作者：简离 链接：https://juejin.im/post/5a6eeb4c6fb9a01cb139661f 来源：掘金