300 多行css代码搞定微信 8.0 的炸裂特效

下面就为您详细讲解"300 多行css代码搞定微信 8.0 的炸裂特效"的完整攻略。

1. 背景介绍

本文介绍的是如何利用 CSS3 实现微信8.0新版的炸裂特效。炸裂特效主要是通过 CSS3 动画和过渡来实现的，其效果可以让页面元素在鼠标 hover 或点击时以炸裂的形式消失，十分惊艳。

2. 实现步骤

2.1 HTML结构

首先要有一个 HTML 结构来为特效提供支持，需要将元素包装在一个容器内。例如：

<div class="explosion-container">
  <div class="explosion-element"></div>
</div>

其中，explosion-container 为容器，explosion-element 为需要炸裂的元素。

2.2 CSS 样式

接下来就是重头戏了——CSS 样式。因为本文要实现的特效比较复杂，所以代码也比较长，需要分步骤给出。

2.2.1 首先定义容器的样式

.explosion-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 7px;
  border-radius: 30px;
}

其中，position、overflow 用于设置定位和溢出处理，border-radius 用于设置圆角边框，display:inline-block 则保证容器的宽高只占用需要的空间。

2.2.2 定义需要炸裂的元素的基本样式

.explosion-element {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff5722;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(0, 0);
  animation-iteration-count: 1;
}

其中，position、top 和 left 用于元素的定位，width 和 height 用于设置元素的宽度和高度，border-radius 用于设置元素的圆角，transform 用于元素动画时的移动，animation-iteration-count 用于设置动画执行次数。

2.2.3 定义元素激活时的效果样式

.explosion-element:after, .explosion-element:before {
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ff5722;
  content: '';
  animation-iteration-count: 1;
}
.explosion-element:after {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  animation: explosion 0.7s cubic-bezier(0.11, 0.11, 0.11, 1.03)
    forwards;
}
.explosion-element:before {
  width: 50px;
  height: 50px;
  top: -15px;
  left: -15px;
  animation: explosion 0.9s cubic-bezier(0.11, 0.11, 0.11, 1.03)
    forwards;
}

上述代码使用了 :after 和 :before 伪元素，实现了元素在激活时的效果，其中 animation 用于定义名称为 explosion 的动画，cubic-bezier 用于设置贝塞尔曲线。

2.3 声明动画

最后，在 CSS 样式中声明动画效果：

@keyframes explosion {
  0% {
    transform: scale(0.2) rotate(-30deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotate(0deg);
    opacity: 0;
  }
}

该代码使用了 @keyframes 来定义名称为 explosion 的动画，实现 transform 的缩放和旋转，以及 opacity 的透明度变化。

3. 示例说明

下面提供两个示例，分别是鼠标 hover 和点击活动时的效果。

3.1 鼠标 hover 活动

当鼠标 hover 到需炸裂元素时，元素在炸裂消失。

<div class="explosion-container">
  <div class="explosion-element">Hover me</div>
</div>

.explosion-element:hover:after,
.explosion-element:hover:before {
  animation: explosion 0.7s cubic-bezier(0.8, 0, 1, 1) forwards;
}

3.2 点击活动

当用户点击需炸裂元素时，元素炸裂消失，并触发回调事件。

<div onclick="explosionOnClick()" class="explosion-container">
  <div class="explosion-element">Click me</div>
</div>

function explosionOnClick() {
  var container = document.querySelector('.explosion-container');
  container.innerHTML = '<div class="explosion-element"></div>';
  var element = document.querySelector('.explosion-element');
  element.addEventListener('animationend', function () {
    container.remove();
  });
  element.className += ' explosion-active';
}

上述代码使用了 JavaScript 的 addEventListener 来监听动画结束事件，当动画结束后，用户便可以在回调函数中编写进一步操作，如跳转、执行其他函数等。

至此，实现微信8.0炸裂特效的完整攻略便讲解完毕。