第13天 - 16天搞定前端，CSS的動畫效果，酷

以往，想在HTML上實現(xiàn)動畫效果，要不就用被喬布斯恨死的了Flash 動畫，要不就用網頁動畫圖像或者JavaScript 實現(xiàn)效果。在CSS3之后，就可以用CSS在HTML上實現(xiàn)動畫了。

要創(chuàng)建 CSS3 動畫，你需要了解 @keyframes 規(guī)則?，F(xiàn)在 @keyframes 創(chuàng)建動畫時，需將其綁定到一個選擇器，否則動畫不會有任何效果。

13.1 原生創(chuàng)建動畫

用CSS3原生代碼創(chuàng)建動畫，語法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動畫的名稱；

keyframes-selector：必需，動畫時長的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個或多個合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動起來</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

輸出結果

13.2 動畫庫創(chuàng)建

如果每次都要自己手動用CSS去創(chuàng)建動畫，那效果太低了。為此，有人專門專門開發(fā)了CSS動畫庫animation.css?？梢栽诰€https://animate.stylek看效果，它里面的動畫效果，可以滿足大多數(shù)需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目錄下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用動畫庫實現(xiàn)動畫</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陳說編程，動畫效果行
</main>
</body>
</html>

輸出結果

好了，有關CSS動畫效果的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發(fā)點贊，讓更多的人看到這篇文章。你的轉發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

一個當了10年技術總監(jiān)的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

家好，本篇文章分享經典Loading加載縮放動畫特效，歡迎參考和指正。

效果圖：

Loading加載縮放動畫特效

HTML代碼：

<div class="tui-demo-5">
 <div class="tui-1"></div>
 <div class="tui-2"></div>
 <div class="tui-3"></div>
</div>

CSS代碼：

<style type="text/css">
 .tui-demo-5 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 }
 .tui-demo-5 div {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: #2eefe6;
 animation: tui-demo-5 0.4s infinite alternate;
 }
 .tui-demo-5 .tui-1 {
 animation-delay: -0.4s;
 }
 .tui-demo-5 .tui-2 {
 animation-delay: -0.2s;
 }
 .tui-demo-5 .tui-3 {
 animation-delay: 0s;
 }
 @keyframes tui-demo-5 {
 0% {
 opacity: 1;
 transform: scale(1);
 }
 100% {
 opacity: 0.4;
 transform: scale(0.6);
 }
 }
</style>

知識點：

animation：是CSS3的動畫屬性，這里把animation綁定到tui-demo-5元素上，并指定該動畫需要0.4秒完成，infinite則表示無限次播放該動畫，alternate則表示動畫會在奇數(shù)次數(shù)正常播放，而在偶數(shù)次數(shù)向后播放，animation-delay則表示動畫在啟動前的延遲間隔。

@keyframes：該規(guī)則表示動畫可以逐步從一個CSS樣式改變?yōu)榱硪粋€CSS樣式。這里0％是動畫開頭，100％是動畫結束。

transform：該屬性應用于2D元素或3D元素的轉換，允許元素發(fā)生旋轉，縮放，移動，傾斜等效果。scale定義2D縮放，可以配置縮放大小。opacity定義元素的不透明級別。

最后注意下瀏覽器兼容問題，-webkit-,-ms-或-moz-，有問題可以留言，大家一起學習HTML+CSS基礎入門開發(fā)。

不是還在為網頁交互感不友好而拍著鍵盤找特效？其實在咱們學習的過程當中就已經可以寫出好玩、炫酷的特效了，只是你還沒有發(fā)現(xiàn)。當細心的操作過后，不僅要拍著大腿說自己怎么沒想到，更要進行反思，怎樣學習才能將知識點熟練的進行應用。那么現(xiàn)在，我們就一起動手來做一個網頁開始的動畫效果吧。

一、分析

任何時候我們都要善于進行分析，尤其在解決問題之前最重要的一步就是分析。

1、首先頁面開場的特效是由Css3動畫來完成的。所有我們一定要使用animation動畫屬性，并且配合@keyframes動畫規(guī)則來進行實現(xiàn)。

2、在動畫執(zhí)行過程當中，我們操作的css樣式分別為放大、顏色、旋轉。其中顏色包括背景顏色和字體顏色

3、打開后文字位置不會隨分辨率大小發(fā)生改變，那么我們需要用到flexbox彈性布局。

二、知識點梳理

1、Css3的animation用法：

之前的時候我們應用簡寫的方式比較多，由于我們需要同時設置多個動畫，所以這里需要分開使用animation。一個屬性名后，可以寫多個動畫名或執(zhí)行時間，記得用逗號隔開。

2、Css3的transform用法：

Transform一共有4種變形狀態(tài)。

旋轉：transform:rotate(Ndeg)

放大：transform:scale();

傾斜：transform:skew(Ndeg);

平移：transform:translate(px);

那這里我們應用前兩個就可以了。

3、一種優(yōu)雅的布局方式 Flexbox彈性盒模型

將容器設置好display:flex;后，主軸居中對齊、交叉軸居中對齊即可。

三、動手做一做

1、首先我們要寫好HTML結構，將標簽自帶的填充去掉，對HTML標簽進行normalize。

*{margin：0；padding：0；}

2、對main標簽進行設置。

設置動畫名稱、設置動畫的持續(xù)時間、設置”豪橫”兩字的擺放位置

3、三種動畫的@keyframes規(guī)則

@keyframes規(guī)則有兩種寫法，兩種方法都有自己的優(yōu)點。第一種更簡單，第二種更加細節(jié)。

1）第一種 from to的方式

2) 第二種百分比的方式

動畫scale：

動畫colors：

動畫rotate：

4、設置一下字號、字體

四、結語

經過編寫后，大家是不是覺得其實并沒有那么復雜呢？前端的入門門檻較低?？梢院芸斓耐ㄟ^簡單的邏輯寫出漂亮的頁面。但是也希望大家更認真得對待知識，想寫出好看的效果首先我們應當有扎實的基本功，配合著豐富的想象力和執(zhí)行力，我們才能寫出更多更好看的特效。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

第13天 - 16天搞定前端，CSS的動畫效果，酷

13.1 原生創(chuàng)建動畫

13.2 動畫庫創(chuàng)建

一、分析

二、知識點梳理