2. 程式人生 > >從零開始學 Web 之 CSS3（六）動畫animation，Web字型

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

阿新 • • 發佈：2019-01-15

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

  • github：https://github.com/Daotin/Web
  • 部落格園：http://www.cnblogs.com/lvonve/
  • CSDN：https://blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、動畫

1、建立動畫

好的前端工程師，會更注重使用者的體驗和互動。那麼動畫就是將我們的靜態頁面，變成具有靈動性，為我們的介面添加個性的一種方式。

一個動畫至少需要兩個屬性：

animation-name ：動畫的名字（建立動畫時起的名字，如下為 moveTest）

animation-duration ：動畫的耗時

animation-name: moveTest;
animation-duration: 2s;

如需在 CSS3 中建立動畫，需要學習 @keyframes 規則。@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。

使用 @keyframes關鍵字來建立動畫。

@keyframes moveTest {
  /*百分比是指整個動畫耗時的百分比*/
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translateY(200px);
  }
  100% {
    transform: translate(200px,200px);
  }
}

其中，百分比是指整個動畫耗時的百分比。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;

            animation-name: moveTest;
            animation-duration: 2s;
        }

        @keyframes moveTest {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translateY(200px);
            }
            100% {
                transform: translate(200px,200px);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

0%：動畫起始位置，也可以寫成 from

100%：動畫終點位置，也可以寫成 to。

2、動畫的其他屬性

animation-iteration-count：設定動畫的播放次數，預設為1次

animation-direction：設定交替動畫

animation-delay：設定動畫的延遲

animation-fill-mode：設定動畫結束時的狀態：預設情況下，動畫執行完畢之後，會回到原始狀態

animation-timing-function：動畫的時間函式（動畫的效果，平滑？先快後慢等）

animation-play-state：設定動畫的播放狀態 paused:暫停 running:播放

/*3.設定動畫的播放次數，預設為1次  可以指定具體的數值，也可以指定infinite(無限次)*/
animation-iteration-count: 1;
/*4.設定交替動畫  alternate:來回交替*/
animation-direction: alternate;
/*5.設定動畫的延遲*/
animation-delay: 2s;
/*5.設定動畫結束時的狀態：預設情況下，動畫執行完畢之後，會回到原始狀態
forwards:會保留動畫結束時的狀態，在有延遲的情況下，並不會立刻進行到動畫的初始狀態
backwards:不會保留動畫結束時的狀態，在添加了動畫延遲的前提下，如果動畫有初始狀態，那麼會立刻進行到初始狀態
both:會保留動畫的結束時狀態，在有延遲的情況下也會立刻進入到動畫的初始狀態*/
animation-fill-mode: both;
/*6.動畫的時間函式:linear,ease...*/
animation-timing-function: linear;
/*設定動畫的播放狀態  paused:暫停   running:播放*/
animation-play-state: running;

3、案例：無縫滾動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 600px;
            height: 100px;
            margin: 100px auto;
            background-color: #ccc;
            overflow: hidden;
        }
        ul {
            width: 200%;
            animation: moveLeft 6s linear 0s infinite;
        }
        ul > li {
            float: left;
            list-style: none;
        }
        li > img {
            width: 200px;
            height: 100px;
        }
        div:hover > ul {
            cursor: pointer;
            animation-play-state: paused;
        }
        @keyframes moveLeft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-600px);
            }
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <!-- 複製的一份圖片 -->
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

1、將要顯示的圖片複製一份，以完成無縫滾動的需求。

2、然後讓 ul 移動整個ul的寬度即可，並且無限迴圈，就實現無線輪播的效果。

3、然後在滑鼠放上去的時候，使得動畫暫停。

4、案例：時鐘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clock {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 10px solid #ccc;
            border-radius: 50%;
            position: relative;
        }
        .line {
            width: 8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .line2 {
            transform: translate(-50%, -50%) rotate(30deg);
        }
        .line3 {
            transform: translate(-50%, -50%) rotate(60deg);
        }
        .line4 {
            width: 10px;
            transform: translate(-50%, -50%) rotate(90deg);
        }
        .line5 {
            transform: translate(-50%, -50%) rotate(120deg);
        }
        .line6 {
            transform: translate(-50%, -50%) rotate(150deg);
        }
        .cover {
            width: 250px;
            height: 250px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .center {
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .hour {
            width: 12px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 43200s linear infinite;
        }
        .minute {
            width: 8px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 3600s linear infinite;
        }
        .second {
            width: 4px;
            height: 120px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 60s infinite steps(60);
        }
        
        @keyframes clockMove {
            from {
                transform: translate(-50%, -100%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>    
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
    </div>
</body>
</html>

我們讓秒針step(60)一步一步走，效果更好。

二、Web字型與圖示

1、web字型

我們有些時候需要在網頁上顯示一些特殊的字型，如果這些特殊的字型在電腦上沒有安裝的話，就會顯示系統預設的字型，而不是這些特殊的字型。

這時就有了 Web 字型。開發人員可以為自已的網頁指定特殊的字型，無需考慮使用者電腦上是否安裝了此特殊字型，從此把特殊字型處理成圖片的時代便成為了過去。它的支援程度比較好，甚至 IE 低版本瀏覽器也能支援。

2、字型格式

不同瀏覽器所支援的字型格式是不一樣的，我們有必要了解一下有關字型格式的知識。

  • TureTpe(.ttf)格式

.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

  • OpenType(.otf)格式

.otf字型被認為是一種原始的字型格式，其內建在TureType的基礎上，支援這種字型的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

  • Web Open Font Format(.woff)格式

woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離，支援這種字型的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

  • Embedded Open Type(.eot)格式

.eot字型是IE專用字型，可以從TrueType建立此格式字型，支援這種字型的瀏覽器有IE4+；

  • SVG(.svg)格式

.svg字型是基於SVG字型渲染的一種格式，支援這種字型的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

3、使用步驟

需要注意的是，我們在使用 Web 字型的時候，應該首先把需要用到特殊字型的這些字寫好，然後在網路上生成這些字型對應的 Web 字型庫，並將其下載下來。下圖為一個網站生成和下載web字型的網站，點選立即使用就可以了：

下載下來之後，把下在下來的所有檔案匯入自己的專案，注意路徑的匹配問題。

之後在我們css樣式裡面使用@font-face關鍵字來自定義 Web 字型。

@font-face {
  font-family: 'shuangyuan';
  src: url('../fonts/webfont.eot'); /* IE9*/
  src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
    url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

最後在使用的時候：font-family: "shuangyuan"; 就可以使用 shuangyuan 這種字型了。

4、字型圖示

字型圖示就是我們常見的字型，不過這個字型的表現形式為一個圖示。這樣我們就可以使用這些特殊的字型來代替精靈圖了。

常見的是把網頁常用的一些小的圖示，藉助工具幫我們生成一個字型包，然後就可以像使用文字一樣使用圖示了。

優點：

  • 將所有圖示打包成字型庫，減少請求；
  • 具有向量性，可保證清晰度；
  • 使用靈活，便於維護

4.1、方法一

使用方法和Web字型一樣。也是先下載需要的圖示字型庫檔案，然後使用關鍵字 @font-face 生成自己的web圖示字型。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../fonts/iconfont.eot'); /* IE9*/
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .myFont{
            font-family: iconfont;
        }
        /*笑臉*/
        .smile::before{
            content: "\e641";
            color: red;
            font-size: 50px;
        }
        /*輸出*/
        .output::before{
            content: "\e640";
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--使用字型圖示的時候，得自己指定你想使用的圖片-->
<span class="myFont smile"></span>
<span class="myFont output"></span>
<span class="myFont">&#xe642;</span>
</body>
</html>

4.2、方法二

直接線上呼叫網上web圖示 css庫

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

使用的時候：和方法一一樣，直接使用類屬性 class='fa fa-play 的方式，fa-play是一個播放的圖示，不同的圖示的名字含義不同，只需要到 font-awesome 官網（http://www.fontawesome.com.cn/）找到對應的圖示的名稱即可。

示例：

<a href="javascript:void(0);" class="fa fa-play"></a>  <!--播放圖示-->
<a href="javascript:void(0);" class="fa fa-arrows-alt"></a>   <!--全屏圖示-->

注意：class 樣式的 第一個 fa 是必寫的，表示的是用的 font-awesome 的字型圖示。

相關推薦

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式 顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)） 紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片 邊框圖片：就是給邊框加圖片背景。 我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？ 原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。 並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。 語法： /* bord

從零開始學Kotlin-控制語句（4）

系列文章 ren kcon tin else andro 格式 當前 break 從零開始學Kotlin基礎篇系列文章 條件控制-if var a=10 var b=20 if(a>b) print(a)

從零開始學Kotlin-枚舉（9）

emc roi 實例 list cnblogs 外部 listener ring 枚舉 從零開始學Kotlin基礎篇系列文章 枚舉的定義 一個類的對象是有限且固定的，這種實例有限且固定的類稱為枚舉類; 枚舉常量用逗號分隔,每個枚舉常量都是一個對象; enum class

從零開始學習比特幣（六）--P2P網路建立的流程之查詢DNS節點

上節開始我們已經開始講解比特幣系統中P2P網路是如何建立的。還記得在比特幣系統啟動的的第12步的講解中，我們提到有幾個執行緒相關的處理非常重要嗎？以下內容正是基於此做了詳細的講解。由於篇幅過長，我們分幾篇文章依次道來。 P2P 網路的建立是在比特幣系統啟動的第 12 步，最後時刻呼叫 C

從零開始學Hadoop——淺析MapReduce（一）

      之前，我們說過Hadoop的兩個核心為HDFS和MapReduce，既然我們已經學習了Hadoop的HDFS，那麼我們就來看看MapReduce是什麼。當然，我們學習的順序還是先看看基

從零開始學Hadoop----淺析HDFS（一）

      之前，我們簡單介紹了一下Hadoop，知道他是一個處理大資料的框架。今天我們來看看Hadoop的核心構成之一—-HDFS. 一、基礎概念 1、是什麼       

從零開始的RxJava之旅（4）---- RxJava2總結

目錄 正文 為什麼要學 RxJava？ 提升開發效率，降低維護成本一直是開發團隊永恆不變的宗旨。近兩年來國內的技術圈子中越來越多的開始提及 RxJava ，越來越多 的應用和麵試中都會有 RxJava ，而就目前的情況，Andro

從零開始學C#——基本語法（二）

基本語法 (菜鳥系列學習教程) C#，又名Csharp，天朝喜歡叫C井。 C#是一種面向物件的程式語言。在面向物件的程式設計方法中，程式有各種相互互動的物件組成。相同種類的物件通常具有相同的型別，或者說，是在先溝通那個的class中。 例如,以Rectangle(矩形)物件

從零開始學寫HTTP伺服器（七）muduo+tinyhttpd

（一）前言 對muduo內嵌的HttpServer進行了稍微的改進，融入了TinyHttpd中對CGI部分內容。 （二）程式碼 （三）CGI 簡單的理解：如果客戶請求的是靜態資料，則web server直接將資料響應給客戶端，如果是動

從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 CSS3（五）transform

transform transform 字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：移動 translate，縮放scale，旋轉rotate，翻轉skew，改變旋轉軸心等。 1、元素的移動：translate 作用：使用transform實現元素的移動 語法： /*使用t

從零開始學 Web 之 CSS3（三）漸變，background屬性

一、漸變 漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變 線性漸變：指沿著某條直線朝一個方向產生漸變效果。 語法： background: linear-gradient(

從零開始學 Web 之 CSS3（八）CSS3三個案例

一、CSS3三個案例 1、案例一：攜程網首頁 需求：頁面無橫向滾動條，頁面隨著寬度的改變自動伸縮。 程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局

一、多列布局 CSS3中新出現的多列布局 (multi-column) 是傳統 HTML 網頁中塊狀佈局模式的有力擴充。 這種新語法能夠讓 WEB 開發人員輕鬆的讓文字呈現多列顯示。 我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用 添加 方式 執行 存在 區別 也會 地址 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：http://ww

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會 否則 ont sele 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web