抓取html中用到的css_如何使用HTML和CSS制作像《星球大战》一样的抓取文字

最新推荐文章于 2021-06-20 11:24:14 发布

weixin_26732881

最新推荐文章于 2021-06-20 11:24:14 发布

阅读量220

点赞数

文章标签： html python css vue js ViewUI

原文链接：https://levelup.gitconnected.com/how-to-make-a-crawl-text-like-star-wars-using-html-and-css-bd6e347b9916

版权

抓取html中用到的css

The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand new at the time.

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

基本HTML (The Basic HTML)

First, let’s set up out HTML for the content:

首先，让我们为内容设置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>

This gives us all the pieces we need:

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

A container called star-wars that we will use to position the content. This is also necessary because we will be using the perspective CSS property, where having a parent element is a helpful way to add depth or skew a child element’s transform property.
一个名为star-wars容器，我们将使用它来定位内容。这也是必要的，因为我们将使用perspective CSS属性，其中具有父元素是增加深度或倾斜子元素的transform属性的有用方法。
A container called crawl that will hold the actual text and be the element that we apply the CSS animation to.
一个称为“ crawl ”的容器将保存实际文本，并且是我们将CSS动画应用到的元素。
The content!
内容！

You may have noticed that the movie title is wrapped in an extra <div> container called title. This is not necessary, but could provide you with additional styling options should you need them.

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

基本CSS (The Basic CSS)

The trick is to imagine a three-dimensional space where the text crawls vertical up the Y-axis and out along the Z-axis. This gives the impression the text is both slide up the screen and away from the viewer at the same time.

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

First, let’s set up the document <body> so that the screen is not scrollable. We want the text to come up from the bottom of the screen without the viewer being able to scroll and see the text before it enters. We can use overflow: hidden to do that:

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

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

Now we can move on to styling our star-wars container, which is the parent element for our demo:

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

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

Next up, we can apply styles to the crawl element. Again, this element is important because it contains the properties that will transform the text and be animated.

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

.crawl {
  position: relative;
  top: -100px;
  transform-origin: 50% 100%;
}

So far, we have a nice looking bunch of text, but it’s neither skewed nor animated. Let’s make that happen.

到目前为止，我们有一堆漂亮的文本，但是既没有歪斜也没有动画效果。让我们做到这一点。

动画！ (Animation!)

This is what you really care about, right? First, we’re going to define the @keyframes for the animation. The animation is doing a little more than animating for us because we’re going to be adding our transform properties here, particularly for the movement along the Z-axis. We’ll start the animation at 0% where the text is closest to the viewer and is located below the screen, out of view, then end the animation at 100% where it is far away from the viewer and flowing up and over the top of the screen.

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

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

Now, let’s apply that animation on the .crawl element:

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

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

微调带来的欢乐时光 (Fun Times With Fine-Tuning)

You can have a little more fun with things once the main effect is in place. For example, we can add a little fade at the top of the screen to accentuate the effect of the text crawling off into the distance:

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

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

Add that element to the top of the HTML and text will flow behind a gradient that goes from transparent to the same background as the <body>:

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

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

完整的例子 (The Full Example)

Here is the full code from this post pulled together.

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

<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);
  }
}

Codepen With Source Code

带源代码的Codepen

翻译自: https://levelup.gitconnected.com/how-to-make-a-crawl-text-like-star-wars-using-html-and-css-bd6e347b9916

抓取html中用到的css

weixin_26732881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抓取html中用到的css_如何使用HTML和CSS制作像《星球大战》一样的抓取文字

抓取html中用到的cssThe opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical st...
复制链接

扫一扫