第13天 - 16天搞定前端，CSS的動(dòng)畫(huà)效果，酷

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

要?jiǎng)?chuàng)建 CSS3 動(dòng)畫(huà)，你需要了解 @keyframes 規(guī)則。現(xiàn)在 @keyframes 創(chuàng)建動(dòng)畫(huà)時(shí)，需將其綁定到一個(gè)選擇器，否則動(dòng)畫(huà)不會(huì)有任何效果。

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

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

keyframes-selector：必需，動(dòng)畫(huà)時(shí)長(zhǎng)的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個(gè)或多個(gè)合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動(dòng)起來(lái)</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>

輸出結(jié)果

13.2 動(dòng)畫(huà)庫(kù)創(chuàng)建

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

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

輸出結(jié)果

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

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

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

家好，本篇文章分享經(jīng)典Loading加載縮放動(dòng)畫(huà)特效，歡迎參考和指正。

效果圖：

Loading加載縮放動(dòng)畫(huà)特效

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>

知識(shí)點(diǎn)：

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

@keyframes：該規(guī)則表示動(dòng)畫(huà)可以逐步從一個(gè)CSS樣式改變?yōu)榱硪粋€(gè)CSS樣式。這里0％是動(dòng)畫(huà)開(kāi)頭，100％是動(dòng)畫(huà)結(jié)束。

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

最后注意下瀏覽器兼容問(wèn)題，-webkit-,-ms-或-moz-，有問(wèn)題可以留言，大家一起學(xué)習(xí)HTML+CSS基礎(chǔ)入門(mén)開(kāi)發(fā)。

不是還在為網(wǎng)頁(yè)交互感不友好而拍著鍵盤(pán)找特效？其實(shí)在咱們學(xué)習(xí)的過(guò)程當(dāng)中就已經(jīng)可以寫(xiě)出好玩、炫酷的特效了，只是你還沒(méi)有發(fā)現(xiàn)。當(dāng)細(xì)心的操作過(guò)后，不僅要拍著大腿說(shuō)自己怎么沒(méi)想到，更要進(jìn)行反思，怎樣學(xué)習(xí)才能將知識(shí)點(diǎn)熟練的進(jìn)行應(yīng)用。那么現(xiàn)在，我們就一起動(dòng)手來(lái)做一個(gè)網(wǎng)頁(yè)開(kāi)始的動(dòng)畫(huà)效果吧。

一、分析

任何時(shí)候我們都要善于進(jìn)行分析，尤其在解決問(wèn)題之前最重要的一步就是分析。

1、首先頁(yè)面開(kāi)場(chǎng)的特效是由Css3動(dòng)畫(huà)來(lái)完成的。所有我們一定要使用animation動(dòng)畫(huà)屬性，并且配合@keyframes動(dòng)畫(huà)規(guī)則來(lái)進(jìn)行實(shí)現(xiàn)。

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

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

二、知識(shí)點(diǎn)梳理

1、Css3的animation用法：

之前的時(shí)候我們應(yīng)用簡(jiǎn)寫(xiě)的方式比較多，由于我們需要同時(shí)設(shè)置多個(gè)動(dòng)畫(huà)，所以這里需要分開(kāi)使用animation。一個(gè)屬性名后，可以寫(xiě)多個(gè)動(dòng)畫(huà)名或執(zhí)行時(shí)間，記得用逗號(hào)隔開(kāi)。

2、Css3的transform用法：

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

旋轉(zhuǎn)：transform:rotate(Ndeg)

放大：transform:scale();

傾斜：transform:skew(Ndeg);

平移：transform:translate(px);

那這里我們應(yīng)用前兩個(gè)就可以了。

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

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

三、動(dòng)手做一做

1、首先我們要寫(xiě)好HTML結(jié)構(gòu)，將標(biāo)簽自帶的填充去掉，對(duì)HTML標(biāo)簽進(jìn)行normalize。

*{margin：0；padding：0；}

2、對(duì)main標(biāo)簽進(jìn)行設(shè)置。

設(shè)置動(dòng)畫(huà)名稱(chēng)、設(shè)置動(dòng)畫(huà)的持續(xù)時(shí)間、設(shè)置”豪橫”兩字的擺放位置

3、三種動(dòng)畫(huà)的@keyframes規(guī)則

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

1）第一種 from to的方式

2) 第二種百分比的方式

動(dòng)畫(huà)scale：

動(dòng)畫(huà)colors：

動(dòng)畫(huà)rotate：

4、設(shè)置一下字號(hào)、字體

四、結(jié)語(yǔ)

經(jīng)過(guò)編寫(xiě)后，大家是不是覺(jué)得其實(shí)并沒(méi)有那么復(fù)雜呢？前端的入門(mén)門(mén)檻較低。可以很快的通過(guò)簡(jiǎn)單的邏輯寫(xiě)出漂亮的頁(yè)面。但是也希望大家更認(rèn)真得對(duì)待知識(shí)，想寫(xiě)出好看的效果首先我們應(yīng)當(dāng)有扎實(shí)的基本功，配合著豐富的想象力和執(zhí)行力，我們才能寫(xiě)出更多更好看的特效。

在線(xiàn)咨詢(xún)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商