久草亚洲视频在线观看,九色精品探花,欧美日韩熟妇

HTML5常用框架

前言

隨著HTML5規(guī)范的不斷完善，圍繞著這一生態(tài)有很多實(shí)用的框架，極大的提高了我們的開發(fā)效率，常見的框架代表有：UI層面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS層面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，還有很多常用的動(dòng)畫庫(kù)、字體圖標(biāo)，比如：Animate、Wow、Iconfont、Iconmoon等。
這些前端框架典型的特點(diǎn)：簡(jiǎn)單易用、相通性強(qiáng)，我們可以在學(xué)習(xí)一個(gè)框架后快速上手其他框架。

一、 Animate.css

圖1

Animate.css是一個(gè)css動(dòng)畫樣式庫(kù)，其目標(biāo)是讓CSS動(dòng)畫像喝水一樣容易（Just-add-water CSS Animation）。
- animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨瀏覽器的動(dòng)畫特效的綜合動(dòng)畫庫(kù))
- animate.css是一個(gè)來自國(guó)外的CSS3動(dòng)畫庫(kù)，它預(yù)設(shè)了抖動(dòng)（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá)70多種動(dòng)畫特效，幾乎包含了所有常見的動(dòng)畫特效。
- 重點(diǎn)：瀏覽器兼容，animate.css底層是通過css3實(shí)現(xiàn)的，當(dāng)然是只兼容支持CSS3 animate屬性的瀏覽器： IE10+、Firefox、Chrome、Opera、Safari。
- 官方演示：https://daneden.github.io/animate.css/
- 案例演示：登錄界面特效
Animate.css的具體使用
引入文件

  <link rel="stylesheet" href="animate.min.css">

給要做動(dòng)畫的HTML標(biāo)簽添加上相對(duì)應(yīng)的類，比如：

   <div class="box myAnimated flip"></div>

注意：類animated的作用是控制動(dòng)畫的持續(xù)時(shí)間，是所有動(dòng)畫的前提條件，在其后面的類則為動(dòng)畫的效果類。

思考？

通過Animate.css只給我們省去了一部分效果動(dòng)畫，其他的還需要用js/jQuery來手寫，能不能夠再化簡(jiǎn)一些？

Snip20170204_6.png

World of Warcraft可以幫助我們解決這個(gè)問題。

二、WOW.js

wow-logo.jpg

核心作用：讓頁(yè)面滾動(dòng)更有趣；
- 通過WOW.js，可以在頁(yè)面逐漸向下滾動(dòng)的過程中逐漸釋放這些動(dòng)畫效果。也就是說：當(dāng)我們向下滾動(dòng)頁(yè)面時(shí)，可以省去很多判斷條件，讓CSS動(dòng)畫逐漸展示出來。
特點(diǎn)
- 輕量級(jí)類庫(kù)，不依賴jQuery，超簡(jiǎn)單的安裝和使用，與animate.css配合，只需要短短幾行代碼就可以實(shí)現(xiàn)很多特效。
- 容易定制，我們可以改變動(dòng)畫去設(shè)置喜歡的風(fēng)格、延遲、長(zhǎng)度、偏移和迭代等等。
兼容性考慮
- 因?yàn)?，WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate屬性的瀏覽器：IE10+、Firefox、Chrome、Opera、Safari。
如何使用？
引入文件

  <link rel="stylesheet" href="animate.min.css">
  <script src="wow.min.js"></script>

在相對(duì)的HTML標(biāo)簽中通過類進(jìn)行引用

  <div class="wow slideInLeft"></div>
  <div class="wow slideInRight"></div>

在JavaScript中進(jìn)行初始化

  new WOW().init();

案例演練：WOW初體驗(yàn)
WOW.js常用的屬性
- data-wow-delay: 動(dòng)畫開始前延遲
- data-wow-duration: 動(dòng)畫持續(xù)時(shí)長(zhǎng)
- data-wow-iteration: 動(dòng)畫重復(fù)次數(shù)
- data-wow-offset: 距離瀏覽器底部到隱藏框頂部的距離（偏移量）

來搞定它？
可以加入data-wow-duration(動(dòng)畫持續(xù)時(shí)間)和data-wow-delay（動(dòng)畫延遲時(shí)間）等屬性。
比如

   <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div>
   <div class="wow slideInRight" data-wow-iteration="5"></div>

data-wow-offset
- 用于決定當(dāng)前的元素在滾動(dòng)的時(shí)候到達(dá)怎樣的位置出現(xiàn)（是在滾動(dòng)之前出現(xiàn)、滾動(dòng)之后出現(xiàn)，還是滾動(dòng)的時(shí)候出現(xiàn)），比如：http://www.520it.com/special/html5
Snip20170204_7.png
WOW的默認(rèn)配置參數(shù)

  var wow = new WOW({
     boxClass: 'wow',   // 動(dòng)畫元素的CSS類（默認(rèn)類名wow）
     animateClass:'animated', // 動(dòng)畫CSS類 （默認(rèn)類名animated）
     offset: 0,  // 距離可視區(qū)域多少開始執(zhí)行動(dòng)畫（默認(rèn)為0）
     mobile: true, // 是否在移動(dòng)設(shè)備上執(zhí)行動(dòng)畫 （默認(rèn)是true）
  });
  
  wow.init();

WOW.js存在怎樣的問題？
WOW.js實(shí)例的動(dòng)畫只能加載一次，如果要重新執(zhí)行動(dòng)畫必須要進(jìn)行刷新。
但是在實(shí)際開發(fā)中，更多時(shí)候動(dòng)畫是只加載一次，否則會(huì)造成視覺錯(cuò)亂。那如果要多次重復(fù)展現(xiàn)動(dòng)畫該如何處理呢？

三、scrollReveal

Snip20170204_8.png

scrollReveal是一個(gè)兼容PC端和移動(dòng)設(shè)備的滾動(dòng)動(dòng)畫庫(kù)。不同的是 WOW.js 的動(dòng)畫只播放一次，而 scrollReveal.js 的動(dòng)畫可以播放一次或無限次；
特點(diǎn)：
- scrollReveal同時(shí)兼容PC端和移動(dòng)端；
- 0依賴（不依賴于jQuery，也不依賴于animate.css）;
- 定制性高，使用簡(jiǎn)單方便快捷。
瀏覽器兼容：
- 雖然scrollReveal.js不依賴于animate.css，但是它的動(dòng)畫也是用CSS3創(chuàng)建的，所以依然需要支持HTML5和CSS3比較好的瀏覽器，比如： IE10+、Firefox、Chrome、Opera、Safari。
  
  Snip20170204_9.png
官網(wǎng)：https://scrollrevealjs.org/

使用方法：

引入文件：

  <script src="js/scrollReveal.js"></script>

html:

  <div class="box"></div>

JavaScript:

  window.onload = function () {
      window.sr = ScrollReveal();
      sr.reveal('.box');
  }

常用參數(shù)：

  var config = {
                reset: false,   // 滾動(dòng)鼠標(biāo)時(shí)，動(dòng)畫開關(guān)
                origin: 'bottom', // 動(dòng)畫開始的方向
                duration: 500,   // 動(dòng)畫持續(xù)時(shí)間
                delay: 0, // 延遲
                rotate: {x:0, y:0, z:0},  // 過度到0的初始角度
                opacity: 0, // 初始透明度
                scale: 0.9, //縮放
                easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 緩動(dòng)'ease', 'ease-in-out'，'linear'...
                // 回調(diào)函數(shù)
                beforeReveal: function(domEl){},
                beforeReset: function(domEl){},
                afterReveal: function(domEl){},
                afterReset: function(domEl){}
  };
  
  window.sr = ScrollReveal();
  sr.reveal('.sr', config);

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        .box{
            width: 1230px;
            margin: 0 auto;
            overflow: hidden;
        }

        ul{
            float: left;
            width: 300px;
            margin-right: 10px;
        }

        ul:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
   <div class="box">
       <ul>
           <li class="sr">![](images/01.jpg)</li>
           <li class="sr">![](images/02.jpg)</li>
           <li class="sr">![](images/03.jpg)</li>
           <li class="sr">![](images/04.jpg)</li>
           <li class="sr">![](images/05.jpg)</li>
           <li class="sr">![](images/06.jpg)</li>
           <li class="sr">![](images/07.jpg)</li>
           <li class="sr">![](images/08.jpg)</li>
           <li class="sr">![](images/09.jpg)</li>
           <li class="sr">![](images/10.jpg)</li>
       </ul>
       <ul>
           <li class="sr">![](images/11.jpg)</li>
           <li class="sr man">![](images/12.jpg)</li>
           <li class="sr">![](images/13.jpg)</li>
           <li class="sr">![](images/14.jpg)</li>
           <li class="sr">![](images/15.jpg)</li>
           <li class="sr">![](images/16.jpg)</li>
           <li class="sr">![](images/17.jpg)</li>
           <li class="sr">![](images/18.jpg)</li>
           <li class="sr">![](images/19.jpg)</li>
           <li class="sr">![](images/20.jpg)</li>
       </ul>
       <ul>
           <li class="sr">![](images/31.jpg)</li>
           <li class="sr">![](images/32.jpg)</li>
           <li class="sr">![](images/33.jpg)</li>
           <li class="sr">![](images/34.jpg)</li>
           <li class="sr">![](images/35.jpg)</li>
           <li class="sr">![](images/36.jpg)</li>
           <li class="sr">![](images/37.jpg)</li>
           <li class="sr">![](images/38.jpg)</li>
           <li class="sr">![](images/39.jpg)</li>
           <li class="sr">![](images/40.jpg)</li>
       </ul>
       <ul>
           <li class="sr">![](images/01.jpg)</li>
           <li class="sr">![](images/02.jpg)</li>
           <li class="sr">![](images/03.jpg)</li>
           <li class="sr">![](images/04.jpg)</li>
           <li class="sr">![](images/05.jpg)</li>
           <li class="sr">![](images/06.jpg)</li>
           <li class="sr">![](images/07.jpg)</li>
           <li class="sr">![](images/08.jpg)</li>
           <li class="sr">![](images/09.jpg)</li>
           <li class="sr">![](images/10.jpg)</li>
       </ul>
   </div>
   <script src="js/scrollreveal.min.js"></script>
   <script>
       window.onload = function () {
           var config = {
               reset: true,   // 滾動(dòng)鼠標(biāo)時(shí)，動(dòng)畫開關(guān)
               origin: 'bottom', // 動(dòng)畫開始的方向
               duration: 500,   // 動(dòng)畫持續(xù)時(shí)間
               delay: 0, // 延遲
               rotate: {x:0, y:0, z:0},  // 過度到0的初始角度
               opacity: 0, // 初始透明度
               scale: 0.9 //縮放
           };

           var config2 = {
               reset: true,   // 滾動(dòng)鼠標(biāo)時(shí)，動(dòng)畫開關(guān)
               origin: 'bottom', // 動(dòng)畫開始的方向
               duration: 1000,   // 動(dòng)畫持續(xù)時(shí)間
               delay: 0, // 延遲
               rotate: {x:0, y:0, z:0},  // 過度到0的初始角度
               opacity: 0.5, // 初始透明度
               scale: 10 //縮放
           };

           window.sr = ScrollReveal();
           sr.reveal('.sr', config);
           sr.reveal('.man', config2);
       }
   </script>
</body>
</html>

四、scrollReveal 和 WOW的區(qū)別和聯(lián)系

它們都不依賴jQuery；
wow依賴于animate.css ，ScrollReveal不依賴任何其他插件或者庫(kù)；
wow的釋放動(dòng)畫，只能夠?qū)崿F(xiàn)一次，而ScrollReveal可以無限次使用；
ScrollReveal 參數(shù)相對(duì)比較多，比較復(fù)雜些；
實(shí)際工作中，用wow比較多。

五、LESS

Snip20170204_10.png

什么是LESS?

Less 是一門 CSS 預(yù)處理語言，使用了類似CSS的語法，為CSS賦予了動(dòng)態(tài)語言的特征。它擴(kuò)展了 CSS 語言，增加了變量、Mixin(混合)、嵌套、函數(shù)和運(yùn)算等特性，使 CSS 更易維護(hù)和擴(kuò)展。此外，Less 可以運(yùn)行在 Node 或?yàn)g覽器端。

一句話：用類似JS的語法去寫CSS
LESS的特點(diǎn)：
- 作為CSS的一種擴(kuò)展，LESS CSS不僅向下兼容CSS的語法，而且連新增的特性也是使用CSS語法。這樣的設(shè)置使得學(xué)習(xí)LESS非常輕松，而且你可以在任何時(shí)候回退到CSS。

變量：?jiǎn)为?dú)定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用。所以在做全局樣式調(diào)整的時(shí)候我們可能只需要修改幾行代碼就可以了
```
   // JS中定義變量
   var name = '張三';
   
   // LESS中定義變量
   @color:red;
   h1{
      color: @color;
   }
```
嵌套
- 在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，這樣很大程度上減少了代碼量，并且代碼看起來更加清晰。
```
  div{
    h1{
       color:red;
    }
  }
```
注意：嵌套一般情況下，不要超過3層
運(yùn)算
- 運(yùn)算提供了加、減、乘、除操作，其他復(fù)雜的運(yùn)算交給函數(shù)；通常我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。
注意：運(yùn)算符與值之間必須以空格分開。
```
  @w:500px;
  
  div{
    h1{
      width: @w - 100;
    } 
  }
  
  h1{
    width: @w;
    border: 1px solid #000;
  }
```
混合(Mixins)
- 混合可以將一個(gè)定義好的class A輕松的引入到class B中，從而簡(jiǎn)單的實(shí)現(xiàn)class B 繼承class A的所有屬性。我們還可以帶參數(shù)的調(diào)用，就像使用函數(shù)一樣。
圖片 1.png
- 注意：混合的使用就和js的自定義函數(shù)類似，首先混合必須前面是以 . +混合名稱開始
- 結(jié)構(gòu)：.名稱(變量){}
- 可以有默認(rèn)值，也可以沒有默認(rèn)值，沒有的話，在調(diào)用的時(shí)候必須傳參，有默認(rèn)值的時(shí)候就可以不用傳遞參數(shù)；
- 多個(gè)參數(shù)之間和js一樣，用逗號(hào)（,）隔開

函數(shù)

LESS中的函數(shù) - 映射了JavaScript函數(shù)代碼，如果你愿意的話，可以操縱屬性值。
比如：鼠標(biāo)移上亮度增加20%。

圖片 2.png
需要查找的時(shí)候，直接查文檔就可以了
比如：

 saturate(@color, 10%); // 飽和度增加 10%
 desaturate(@color, 10%); // 飽和度降低 10%
 lighten(@color, 10%); // 亮度增加 10%
 darken(@color, 10%); // 亮度降低 10%
 fadein(@color, 10%); // 透明度增加 10%
 fadeout(@color, 10%); // 透明度降低 10%
 fade(@color, 50%); // 設(shè)定透明度為 50%
 spin(@color, 10); // 色相值增加 10
 ……

匹配模式
- 類似js中的if else判斷，只有匹配成功才能起作用
圖片 3.png

注意：匹配模式中,定義的模式名稱都是一樣的，只是參數(shù)不一樣，調(diào)用的時(shí)候只需選擇對(duì)應(yīng)的參數(shù)就可以了。

如何使用LESS?
- 方式一：客戶端直接調(diào)用
```
<link rel="stylesheet/less" href="less/less.less">

<script type="text/javascript" src="js/less.min.js"></script>
```
注意：必須在服務(wù)器環(huán)境中才能生效，動(dòng)態(tài)編譯注入虛擬DOM或者內(nèi)存中，類似ajax。
開發(fā)中常用的服務(wù)器組合：WAPM
- 方式二：預(yù)編譯（提前編譯）
  - 在代碼編輯器中，按照LESS的語法規(guī)則寫好LESS文件；
  - 使用編譯工具把.less文件編譯成.css文件；
  - 把編譯后的css文件引入到頁(yè)面即可。
  編譯工具：Koala
  
  Snip20170205_11.png

如何在一個(gè)LESS文件中導(dǎo)入另一個(gè)LESS文件？

   @import "less.less";   // 注意：less文件擴(kuò)展名可選

其他補(bǔ)充
// 不會(huì)被編譯器編譯的注釋
/**/ 是可以被編譯器編譯的注釋
~’’ 表示的是禁止被編譯
& 表示選擇所有的父級(jí)元素

《授之于漁》
- LESS官網(wǎng)：http://lesscss.org/
- LESS中文網(wǎng) ：
  http://www.lesscss.cn/
  http://www.lesscss.net/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTML5常用框架

HTML5常用框架

HTML5常用框架

前言

一、 Animate.css

思考？

二、WOW.js

三、scrollReveal

四、scrollReveal 和 WOW的區(qū)別和聯(lián)系

五、LESS

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTML5常用框架

HTML5常用框架

前言

一、 Animate.css

思考？

二、WOW.js

三、scrollReveal

四、scrollReveal 和 WOW的區(qū)別和聯(lián)系

五、LESS

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、 Animate.css

思考？

二、WOW.js

三、scrollReveal

四、scrollReveal 和 WOW的區(qū)別和聯(lián)系

五、LESS