星球大战抓取文字

最新推荐文章于 2024-08-10 22:43:21 发布

cunqu9743

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量155

点赞数

文章标签： css html css3 js html5 ViewUI

《星球大战》的开幕是标志性的。文字在屏幕上向上和向屏幕外滚动的效果既是1977年电影的疯狂酷炫特效，又是当时崭新的酷炫印刷风格。

我们可以使用HTML和CSS达到类似的效果！这篇文章更多地是关于如何获得滑动文字效果的，而不是试图重新创建完整的《星球大战》开幕式或匹配电影中使用的确切样式，因此让我们来看看最终的结果：

请参阅CodePen上的Geoff Graham（ @geoffgraham ）撰写的Pen Star Wars Intro 。

基本HTML

首先，让我们为内容设置HTML：

<section class="star-wars">

  <div class="crawl">
    
    <div class="title">
      <p>Episode IV</p>
      <h1>A New Hope</h1>
    </div>
    
    <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>     
    <p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>
    <p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…</p>

  </div>

</section>

这为我们提供了我们需要的所有部件：

一个名为star-wars容器，我们将使用它来定位内容。这也是必要的，因为我们将使用perspective CSS属性，其中具有父元素是增加深度或倾斜子元素的transform属性的有用方法。
一个名为crawl的容器将保存实际文本，并且是我们将CSS动画应用到的元素。
内容！

您可能已经注意到，电影标题包装在名为title的额外<div>容器中。这不是必需的，但是可以在需要时为您提供其他样式选项。

基本CSS

诀窍是想象一个三维空间，其中文本沿Y-axis垂直向上爬行，沿Z-axis爬行。这给人的印象是文本既可以在屏幕上滑动，又可以同时离开查看器。

首先，让我们设置文档<body> ，以使屏幕不可滚动。我们希望文本从屏幕底部出现，而查看者无法在输入之前滚动并查看文本。我们可以使用overflow: hidden来做到这一点：

body {
  /* Force the body to fill the entire screen */
  width: 100%;
  height: 100%;
  /* Hide elements that flow outside the viewable space */
  overflow: hidden;
  /* Black background for the screen */
  background: #000;
}

现在，我们可以继续设计“ star-wars容器的样式，这是演示的父元素：

.star-wars {
  /* Flexbox to center the entire element on the screen */
  display: flex;
  justify-content: center;
  /* This is a magic number based on the context in which this snippet is used and effects the perspective */
  height: 800px;
  /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */
  perspective: 400px;
  /* The rest is totally up to personal styling preferences */
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  text-align: justify;
}

接下来，我们可以将样式应用于crawl元素。同样，此元素很重要，因为它包含将转换文本并进行动画处理的属性。

.crawl {
  /* Position the element so we can adjust the top property in the animation */
  position: relative;
  /* Making sure the text is fully off the screen at the start and end of the animation */
  top: -100px;
  /* Defines the skew origin at the very center when we apply transforms on the animation */
  transform-origin: 50% 100%;
}

到目前为止，我们有一堆看起来不错的文本，但是它既没有歪斜也没有动画效果。让我们做到这一点。

动画！

这是您真正关心的，对吗？首先，我们将为动画定义@keyframes 。动画为我们做的不仅仅是动画，因为我们将在此处添加transform属性，尤其是沿Z-axis 。我们将在0%处开始动画，在文本最靠近查看者的位置，并且位于屏幕下方（视线之外），然后在100%处结束动画，使动画远离查看者并向上并向上流动屏幕的

/* We're calling this animation "crawl" */
@keyframes crawl {
  0% {
    /* The element starts below the screen */
    top: 0;
    /* Rotate the text 20 degrees but keep it close to the viewer */
    transform: rotateX(20deg) translateZ(0);
  }
  100% { 
    /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */
    top: -6000px;
    /* Slightly increasing the rotation at the end and moving the text far away from the viewer */
    transform: rotateX(25deg) translateZ(-2500px);
  }
}

现在，让我们将该动画应用于.crawl元素：

.crawl {
  /* Position the element so we can adjust the top property in the animation */
  position: relative;
  /* Defines the skew origin at the very center when we apply transforms on the animation */
  transform-origin: 50% 100%;
  /* Adds the crawl animation, which plays for one minute */
  animation: crawl 60s linear;
}

微调带来的欢乐时光

一旦主要效果到位，您可以在事情上获得更多乐趣。例如，我们可以在屏幕顶部添加一些淡入淡出效果，以突出显示文本爬到远方的效果：

.fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -25px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
}

将该元素添加到HTML的顶部，文本将在渐变之后流动，该渐变从透明变为与<body>相同的背景：

<div class="fade"></div>

完整的例子

这是这篇文章的完整代码。

<div class="fade"></div>

<section class="star-wars">

  <div class="crawl">

    <div class="title">
      <p>Episode IV</p>
      <h1>A New Hope</h1>
    </div>
    
    <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>      
    <p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>
    <p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…</p>

  </div>

</section>

body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -25px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
}

.star-wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  top: 9999px;
  transform-origin: 50% 100%;
  animation: crawl 60s linear;
}

.crawl > .title {
  font-size: 90%;
  text-align: center;
}

.crawl > .title h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes crawl {
  0% {
    top: 0;
    transform: rotateX(20deg)  translateZ(0);
  }
  100% { 
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}

其他例子

除本文中介绍的技术外，其他一些人还使用其他技术对《星球大战》开幕做了更为忠实的演绎。

蒂姆·皮特鲁斯基（Tim Pietrusky）有一个精心设计的版本， top使用运动和opacity来创建褪色效果：

参见Tim Pietrusky（ @TimPietrusky ）于1977年在CodePen上发布的“笔式星球大战”开幕式。

Yukulélé使用margin沿屏幕移动：

请参阅CodePen上Yukulélé （ @yukulele ）撰写的Pen Pure CSS Star Wars开幕式。

Karottes很像这篇文章一样使用transform ，但是更多地依赖于TranslateY来沿Y-axis移动文本。

请参阅CodePen上Karottes （ @Karottes ）撰写的Pen Star Wars Crawl 。

翻译自: https://css-tricks.com/snippets/css/star-wars-crawl-text/

cunqu9743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
星球大战抓取文字

《星球大战》的开幕是标志性的。文字在屏幕上向上和向屏幕外滚动的效果既是1977年电影的疯狂酷炫特效，又是当时崭新的酷炫印刷风格。我们可以使用HTML和CSS达到类似的效果！这篇文章更多地是关于如何获得滑动文字效果的，而不是试图重新创建完整的《星球大战》开幕式或匹配电影中使用的确切样式，因此让我们来看看最终的结果：请参阅CodePen上的Geoff Graham（ @geof...
复制链接

扫一扫