Question

我有一个单词标题，分为两半，用@keyframe动画，并在页面中间相遇。问题：在页面中间到达正确位置后，我需要将两个中的一个从常规变为斜体。由于我不打算使标题可点击，因此使用悬停没有意义。有没有办法做到这一点，而不诉诸javascript ...？

Answer 1

由于字体样式为not an animatable property，您可以使用偏斜变换。

＆＃13;

h1 span {
  position: relative;
}
#title_part1 {
  animation: part1_move 2s;
}
#title_part2 {
  
  animation: part2_move 2s,part2_skew 4s;
  
  display: inline-block;
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes part1_move {
  from {
    left: -100px;
  }
  to {
    left: 0;
  }
}


@keyframes part2_move {
  from {
    left: 100px;
    }
  to{
    left:0
  }
}

@keyframes part2_skew{
  from {
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  50%{
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  to{
    transform:skewX(-20deg);
    -ms-transform:skewX(-20deg)
  }
}

＆＃13;

<h1>
  <span id="title_part1">The start and </span>
  <span id="title_part2">the end of my title </span>
</h1>

＆＃13;

如何用CSS3转换字体样式？

1 个答案: