冲击波效应也称为爆炸效应。它是简单的 CSS 效果之一。对于初学者来说，它是学习伪元素概念的最好例子之一。我们使用的伪元素是悬停。我建议您在跳入代码之前先通读一遍以更好地理解它。对于简报，当鼠标悬停在元素上时，使用鼠标悬停将样式应用于元素。
- HTML 代码：通过使用 HTML，我们将创建一个使用爆炸或冲击波效果的普通结构。
Document - CSS 代码：第一步是使用 flexbox将我们的 div 与页面中心对齐，然后我们必须使用border-radius属性创建一个圆。我们在每一步都增加了它的偏移值。然后我们将使用过渡持续时间到 div。现在使用悬停选择器并复制并粘贴我们之前使用的 box-shadow 属性并增加它的偏移值。我们增加了它的值，以便在悬停时感觉就像从中心出来（爆炸效果）。您可以使用 box-shadow 的颜色来实现不同甚至多种颜色的爆炸。
最终解决方案：在本节中，我们将把上述两个部分结合在一起来完成上述任务。
- 程序：
Document - 输出：
