css动画播放后隐藏

CSS动画宽度变窄

/* HTML部分 */
<div class="Box">
  <p>这是一段动画宽度变窄的文本</p>
</div>

/* CSS部分 */
.Box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.Box p {
  font-size: 18px;
  padding: 20px;
  text-align: center;
  margin: 0;
  transition: width 0.5s ease-out;
}
.Box:hover p {
  width: 120px;
}

CSS动画宽度变窄是一种常见的动画效果，可以用于吸引用户的注意力，让网站更加生动。下面我们来介绍一下如何实现宽度变窄的动画效果。

首先，我们需要一个盒子。在HTML中，我们可以使用

标签来创建一个盒子，并在盒子中放置一些文本。

<div class="Box">
  <p>这是一段动画宽度变窄的文本</p>
</div>

接下来，我们需要在CSS中设置盒子的样式。这里我们设置盒子的宽度为200px，高度为100px，背景颜色为灰色，并使用flex布局使文本居中显示。为了实现宽度变窄的动画效果，我们将overflow属性设置为hidden，这样文本超出盒子部分就会被隐藏。

.Box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

然后，我们设置文本的样式。这里我们将文本的字体大小设置为18px，内边距设置为20px，文本居中显示，并将宽度变窄的过渡效果设置为0.5s。

.Box p {
  font-size: 18px;
  padding: 20px;
  text-align: center;
  margin: 0;
  transition: width 0.5s ease-out;
}

最后，在:hover伪类下，我们将文本的宽度从200px变为120px。这样鼠标放在盒子上时，就会出现宽度变窄的动画效果。

.Box:hover p {
  width: 120px;
}

这就是CSS动画宽度变窄的实现方法，通过优雅的CSS代码，我们能够轻松实现这种动画效果，让网站更加生动有趣。

上一篇：css动画实现有哪些 下一篇：css动画是程序吗