css中旋转动画的效果

Posted on | Post modified:
最近需要写一个动画展示效果，碰到一些问题，主要是元素的block设置以及如何解决导致其他元素文本模糊的bug

css动画旋转

css3新增了transition关键字，作用在于状态变化需要的时间

  • 关键字可以指定具体的属性，比如说height,width等，例如transition: 1s height, 1s width;
  • 关键字可以设定delay的时间，比如有的时候需要某个属性在另外一个属性生效后，等待1秒才开始变化，例如transition: 1s height, 1s 1s width;
  • 状态变化的速度，ease代表不是匀速，逐渐缓慢；liner代表是匀速；ease-in：加速；ease-out：减速；cubic-bezier函数：自定义速度模式

动画animation

1
2
3
4
5
6
7
8
9
10
11
12
13
.deploy-running {
  animation: rotating 2s linear infinite;
  color: #67c23a;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

上面的css代码就是一个旋转的示例，第一个定义了一个css类，定义到要旋转的元素上，下面是实现旋转的方式

  • 需要注意一点的是，如果是对一个icon实现该效果，必须要定义一个块状的结构，单独对于i元素来说不起效果
1
2
3
4
5
.special-size {
  font-size: 2.5rem;
  display: block;
  /*color: #155724;*/
}

文本模糊的问题

问题导致的原因主要是transform关键字导致的问题，一般来说，出现问题的原因在于transform变化的时候如果算出是font-size为小数，浏览器渲染可能就模糊了，像素点的问题，因此需要将字体大小设置得更平滑一些，这一点需要慢慢调试

1
-webkit-font-smoothing：antialiased;
  • 上面的代码也可以尝试下
  • 这周遇到的问题，通过在页面上调试，发现是一个父级元素的overflow: hidden导致出来的，因此定义这个visible也就解决掉了
  • 只要掌握了原因，那么调试起来就比较快