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

使用CSS3做了如下文字切换的效果,通过给元素设置 activedisappear 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;
    }
  }

解决办法: 在.legend内添加z-index后模糊效果消失。

原理参考:
张鑫旭: 深入理解CSS中的层叠上下文和层叠顺序
很好玩:CSS动画原理及硬件加速

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值