Question

只使用CSS是否可以隐藏/选择字符串的小写字符？

<p>Richard Parnaby-King</p>

仅显示RPK？

使用::first-letter我只能显示字母R。有没有办法扩展这个？

＆＃13;

p {
  font-size:0;
}
p::first-letter {
  font-size:16px;
}

＆＃13;

<p>Richard Parnaby-King</p>

＆＃13;

修改

目的是为这些字母添加动画效果。即拥有一个以RPK开头的css动画，并在悬停时展开为Richard Parnaby-King。

我无法改变html。

我目前的想法是将p标记的字体颜色更改为白色（在白色背景上），使用内容＆＃34; RPK＆＃34;创建:after元素。以p标记为中心，并在:hover动画上旋转＆＃34; RPK＆＃34; 90度，然后display:none它（或某些不可见的东西），将p标签旋转到270度并动画旋转它以360度完成。最后的效果是＆＃34; RPK＆＃34;转身和＃34; Richard Parnaby-King＆＃34;走出它。下面我有＆＃34;有点＆＃34;我上面描述的效果，但它没有正确隐藏/显示文本。

＆＃13;

p {
  color: #fff;
  position: relative;
  text-align: center;
}
p:after {
  content: "RPK";
  position: absolute;
  left: 0;
  top: 0;
  color:#000;
  text-align: center;
  width:100%;
}
p:hover {
  animation: pSpin 1s forwards;
}
p:after:rhover {
  animation: pAfterSpin 0.5s forwards;
}
@keyframes pSpin {
  0% {
    transform:rotateY(0deg);
    color:#fff;
  }
  50% {
    color:#000;
    transform:rotateY(270deg);
  }
  100% {
    transform:rotateY(360deg);
    color:#000;
  }
  
}
@keyframes pAfterSpin {
  0% {
    transform:rotateY(0deg);
    color:#000;
  }
  100% {
    transform:rotateY(90deg);
    color:#fff;
    z-index:-5
  }
}

＆＃13;

<p>Richard Parnaby-King</p>

＆＃13;

Answer 1

如果稍微更改HTML，您可以实现它。你可能不得不更多地玩它。

p span {
  font-size:0;
  display: inline-block;
}
p span::first-letter {
  font-size:16px;
}

<p><span>Richard</span> <span>Parnaby-</span><span>King</span></p>

Answer 2

根据我的问题，我设法让这个动画工作，其中小写文本最初被隐藏，然后，在悬停时，显示。它并不完全像我希望的那样（我不希望文本旋转，但它足够接近）。

我正在使用一系列动画。第一种是旋转:after内容。完成后，旋转整个p标记并为其旋转设置动画以显示全名。

div {
  padding:1em;
}

p {
  color: #fff;
  position: relative;
  text-align: center;
}
p:after {
  content: "RPK";
  position: absolute;
  left: 0;
  top: 0;
  color:#000;
  text-align: center;
  width:100%;
  
}
div:hover p {
  animation: pSpin 0.5s forwards;
  animation-delay:0.3s;
}
div:hover p:after {
  animation: pAfterSpin 0.5s forwards;
}
@keyframes pSpin {
  0% {
    transform:rotateY(0deg);
    color:#fff;
  }
  51% {
    color:#fff;
    transform:rotateY(270deg);
  }
  52% {
    color:#000;
    transform:rotateY(270deg);
  }
  99% {
    color:#000;
  }
  100% {
    transform:rotateY(360deg);
    color:#000;
  }
  
}
@keyframes pAfterSpin {
  0% {
    transform:rotateY(0deg);
    color:#000;
    z-index:2;
  }
  99% {
    color:#000;
    z-index:2;
  }
  100% {
    transform:rotateY(90deg);
    color:#fff;
    z-index:-5
  }
}

<div>
  <p>Richard Parnaby-King</p>
</div>

隐藏/显示小写字符

修改

2 个答案: