用css的transition属性写h5设置一个块,默认显示图片中第一个笑脸,鼠标经过时显示最后一个笑脸

你可以使用CSS的`transition`属性来实现这种动画效果，让块在鼠标悬停时平滑地切换内容。下面是一个简单的例子：

HTML部分:

<div class="smiley-container">
  <img src="default_smile.png" alt="默认笑脸" class="current-smiley default">
  <img src="last_smile.png" alt="最后一个笑脸" class="hidden smiley">
</div>

CSS部分:

.smiley-container {
  position: relative;
  transition: transform 0.5s ease; /* 设置过渡动画的速度和缓动函数 */
}

.default {
  opacity: 1; /* 默认笑脸可见 */
  display: block; /* 显示默认图片 */
}

.smiley {
  opacity: 0; /* 隐藏最后一个笑脸 */
  display: none; /* 初始隐藏最后一个笑脸 */
  position: absolute; /* 确保笑脸定位不影响默认笑脸 */
  top: 0;
  left: 0;
}

.smiley-container:hover .default {
  opacity: 0; /* 当鼠标悬停时，隐藏默认笑脸 */
  transform: translateX(-100%); /* 移出屏幕 */
}

.smiley-container:hover .smiley {
  opacity: 1; /* 显示最后一个笑脸 */
  transform: translateX(0); /* 将最后一个笑脸移至屏幕中心 */
}

在这个例子中，`.current-smiley`类代表当前显示的笑脸，默认状态下为第一个笑脸(`default`). 当鼠标悬停在容器上时，通过`.smiley-container:hover`伪类改变其样式，使得默认笑脸淡出并移出屏幕，同时最后一个笑脸淡入并占据原位置。