CSS3 使用 animation 动画出现字体模糊

最新推荐文章于 2024-12-25 08:15:36 发布

原创最新推荐文章于 2024-12-25 08:15:36 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用CSS3实现文字切换动画时遇到的文字模糊问题及其解决方案。通过添加z-index属性，解决了执行animation动画时页面其他文字出现模糊的现象。文章还提供了关于CSS层叠上下文和层叠顺序的深入理解链接。

使用CSS3做了如下文字切换的效果，通过给元素设置 active 、 disappear class，配合animation实现动画：
在这里插入图片描述
animation 代码如下：

@keyframes transfromAnimate {
  from {
    opacity: 0;
    transform:translate3d( 0, 16px, 0);
  }
  to {
    opacity: 1;
    transform:translate3d( 0, 0px, 0);
  }
}
@keyframes transfromAnimate2 {
  from {
    opacity: 1;
    transform:translate3d( 0, 0px, 0);
  }
  to {
    opacity: 0;
    transform:translate3d( 0, 16px, 0);
  }
}

此处执行animation动画时，页面其他文字出现如下文字模糊问题：
在这里插入图片描述
此处代码如下：

.legend {
    position: absolute;
    right: 24px;
    bottom: 36px;
    display: flex;
    /* z-index: 100; */ 
    .legendItem {
      display: flex;
      align-items: center;
      margin-right: 20px;
      opacity: 0.4;
    }
  }