抓取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.pswp.cn/news/274243.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/274243.shtml
英文地址，請注明出處：http://en.pswp.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…