时间戳

首页 > 解决方案 > 仅对文本产生窗帘效果 - 文本从中间到外边缘显示

html - 仅对文本产生窗帘效果 - 文本从中间到外边缘显示

问题描述

我正在尝试在某些文本上创建窗帘效果。我希望首先隐藏文本，然后从文本中间到外边缘进行动画显示。即使有奇数个字母，我也希望它能够工作。换句话说，分解字符串是行不通的。如果字符串中只有一个大字符，我希望它从字符中心显示到字符的外边缘。我不想要背景上的窗帘效果，因为我还不知道我想要什么样的背景。我只希望它在文本上。

这是我到目前为止所拥有的：

HTML

<div class="container">
  <div class="my-name">The Incredible Houdini</div>
</div>

CSS

body {
  margin: 0;
}

.container {
  position: relative;
  font-size: 3vh;
  width: 100%;
  height: 100vh;
  background: lightblue;
}
.my-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  color: darkblue;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: showName 5s linear 3s forwards;
}
@keyframes showName {
  from {
    width: 0;
  }
  to {
    width: 15ch;
  }
}

溢出：隐藏和从 0 到 100 的宽度给了我我想要的，因为单个字符逐渐被显示而不是像打字机一样弹出。问题是它从左到右生成。有什么办法可以开始将宽度从中间扩展到外边缘？

标签： htmlcssanimation

解决方案

首先，您需要一个关键帧来调整auto宽度，这是您无法做到的。我建议重新考虑你的方法。

我会为剪辑路径设置动画

body {
  margin: 0;
}

.container {
  position: relative;
  font-size: 25vh;
  width: 100%;
  height: 100vh;
  background: lightblue;
  display:flex;
  justify-content:center;
  align-items:center;
}
.my-name {
  font-weight: bold;
  color: white;
  overflow: hidden;
  padding: .25em;
  background: rebeccapurple;
  clip-path: inset(0 100% 0 100%);
  animation: showName 5s linear forwards;
}


@keyframes showName {
  0% {
    clip-path: inset(0 100% 0 100%);
  }
  100% {
    clip-path: inset(0);
  }
}
<div class="container">
  <div class="my-name">The Incredible Houdini</div>
</div>

推荐阅读