Question

我被困在这里。有人知道下面的代码在哪里错误吗？我可以想到，尝试搜索并尝试了各种代码。由于某些原因，文本不会更改，而只会显示“原始文本”，甚至不会旋转（但外观会发生变化）。我想旋转（Y），同时更改外观和文字。任何帮助表示感谢，谢谢。

.test:before {
content: "Original Text";
font-size: 250%;
font-weight: bold;
padding-top: 25px;
color: #ffffff;
-webkit-animation: anim 4s infinite alternate ease-in-out;
animation: anim 4s infinite alternate ease-in-out;
}
@-webkit-keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}
@keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); content: "Original Text";}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); content: "Changed Text";}
}

Answer 1

伪元素需要具有display:inline-block才能进行转换。

.test:before {
  display: inline-block;
  content: "Original Text";
  font-size: 250%;
  font-weight: bold;
  padding-top: 25px;
  color: #ffffff;
  -webkit-animation: anim 4s infinite alternate ease-in-out;
  animation: anim 4s infinite alternate ease-in-out;
}

@-webkit-keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

@keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    content: "Original Text";
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    content: "Changed Text";
  }
}

<div class="test"></div>

用css更改文本（更少）动画旋转（是）可能吗？

1 个答案: