css3动画删除效果

在网站开发中，动画效果常常被用来增强用户体验，让网站看起来更为生动和活泼。而在 CSS3 中，我们可以利用其提供的动画属性来达到各种效果。本文将介绍如何使用 CSS3 中的动画属性产生删除效果。

/* HTML 代码 */
<div class="delete">删除</div>

/* CSS 代码 */
.delete {
  display: inline-block;
  padding: 5px 10px;
  background-color: #E6E6E6;
  border-radius: 5px;
  cursor: pointer;
}

/* 鼠标悬停效果 */
.delete:hover {
  background-color: #FF9999;
  color: #FFFFFF;
}

/* 动画实现 */
.delete:after {
  content: "×";
  font-size: 16px;
  font-weight: bold;
  color: #FF0000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  transition: all 0.3s ease-in-out;
}

.delete:hover:after {
  transform: translate(-50%,-50%) scale(1);
}

css3动画删除效果

以上代码中，我们首先定义了一个带文字和背景颜色的 div，然后使用:hover 伪类来定义鼠标悬停时的颜色变化。接着，利用 CSS 的伪元素 :after，给 div 添加一个带 × 文字的伪元素，并给其赋予绝对定位。我们将 × 文字的位置设为元素中心，使用 transform 属性的 translate(-50%,-50%) 做到这一点。并将其 transform 的 scale 属性设为 0，使得其不可见。

最后，在鼠标悬停时，我们可以将 :after 伪元素的 transform 的 scale 属性改变为 1，使其出现，并达到删除效果。通过在 :after 伪元素上使用 transition 属性来实现平滑的动画效果。

通过本文的介绍，相信您已经学会如何使用 CSS3 中的动画属性实现删除效果，并且可以将该方法应用到自己的网站开发中，来增强用户体验。

css3动画删除效果

相关文章