抓取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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/274243.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

不安装游戏apk直接启动法

原文地址：http://blog.zhourunsheng.com/2011/09/%E6%8E%A2%E7%A7%98%E8%85%BE%E8%AE%AFandroid%E6%89%8B%E6%9C%BA%E6%B8%B8%E6%88%8F%E5%B9%B3%E5%8F%B0%E4%B9%8B%E4%B8%8D%E5%AE%89%E8%A3%85%E6%B8%B8%E6%88%8Fapk%E7%9B%B4%E6%8E%A5%E5%90%AF%E5%8A%A8%E6%B3%95…

web字体设置成平方字体_Web字体正确完成

web字体设置成平方字体When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-user experience.使用网络字体时，必须小心避免其隐…

Android客户端打包方案分享

基本介绍 Android应用的自动化打包是应用持续集成以及多渠道发布的基础。当前Android客户端自动化打包的主要有两种方式，Ant和Maven。两种方式本质上都是调用Android SDK里面提供的工具，不过各自有各自的特点。 1. Ant脚本好处：开发成本较低…

sql注入修复方法是_旧的方法是修复我们可以看到的内容。

sql注入修复方法是When envisioning the futurestate of a company or a service, we’re usually faced with the challenge of designing for a customer that doesn’t exist yet. What do we mean by this? Well, they exist in the obvious sense, they’re just not ‘t…

library听证会_听证会

library听证会My Initial Experience with a Screen Reader我对屏幕阅读器的初步体验 As a new web developer, I have been learning to make my sites visually appealing but still be accessible, and all-in-all, it’s been going decent. I’ve been including cool ic…

jsoup测试例子

1、测试代码 import java.io.File; import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.select.Elements; public class Test { public static void main(String[] args) { Test t new Test(); t.parseUrl(); } publ…

ux和ui_他们说，以UX / UI设计师的身份加入一家初创公司。他们说，这会很有趣。

ux和uiSure, working in a startup environment sounds fun. The stories of flexibility and freedom that it entails spark curiosity into people’s minds, making it enticing to explore a career in the startup scene. In reality, working in a startup just present…

程序员在囧途

程序员在囧途：http://www.shenyisyn.org/2013/05/21/cxyzhc.htm转载于:https://www.cnblogs.com/Qiaoyq/archive/2013/05/22/3092904.html

架构师之路　扩充字段_扩大您作为设计师的业务影响力的四个基础

架构师之路　扩充字段While catching up with my designer friends during these days of quarantine, a common topic surfaced in all our conversations despite the different countries, cultures, companies, seniority levels, and paths in the field: 在这些隔离日中与…

android之隐式intent调用

直接上代码 MainActivity.java 1 package com.example.test1;2 3 import android.app.Activity;4 import android.content.Intent;5 import android.net.Uri;6 import android.os.Bundle;7 import android.view.View;8 import android.view.View.OnClickListener;9 import andr…