嘿嘿连载app下载黄色,嫩草影院免费观看,国产亚洲精品久久久999

第07章-前端核心技術-CSS3動畫特效

項目經理(作者)：張明星

學習目標

掌握CSS3特效的制作 重點
掌握CSS3各種轉換的特效 重點
掌握CSS3動畫的制作 重點
掌握CSS3漸變色的使用
掌握CSS3響應式設計 難點

CSS3 過渡transition

過渡屬性

屬性	描述
transition	簡寫屬性，用于在一個屬性中設置四個過渡屬性。
transition-property	規(guī)定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規(guī)定過渡效果的時間曲線。默認是 "ease"。
transition-delay	規(guī)定過渡效果何時開始。默認是 0。

案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>變換</title>
        <style>
            div {
                width: 100px;
                background: blue;
                -webkit-transition: width 2s linear 1s,
                background-color 2s linear 1s;

                
                transition: width 2s linear 1s,
                background-color 2s linear 1s;
            }
            div:hover {
                width: 200px;
                background-color: red;
            }
            img {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <p><b>注意：</b>無法在 IE9 及更早 IE 版本上工作。</p>
        <div><img src="image/avatar.jpg" /></div>
    </body>
</html>

效果圖

CSS3 轉換transform

轉換屬性

Property	描述
transform	適用于2D或3D轉換的元素

2D 轉換

函數(shù)	描述
matrix(n,n,n,n,n,n)	2D 轉換，使用六個值的矩陣。（選修）
translate(x,y)	2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n)	2D 轉換，沿著 X 軸移動元素。
translateY(n)	2D 轉換，沿著 Y 軸移動元素。
scaleX(n)	2D 縮放轉換，改變元素的寬度。
scaleY(n)	2D 縮放轉換，改變元素的高度。
rotate(angle)	2D 旋轉，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle)	2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle)	2D 傾斜轉換，沿著 X 軸。
skewY(angle)	2D 傾斜轉換，沿著 Y 軸。

translate(?px/%) 位置變換

translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當前元素位置移動。

rotate(?deg) 旋轉

rotate()方法，在一個給定度數(shù)順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

scale(x,y) 尺寸改變

scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

skew(?deg,?deg) 傾斜

transform:skew(angle [,angle]);

包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認為0，參數(shù)為負表示向相反方向傾斜。

skewX(angle);表示只在X軸(水平方向)傾斜。
skewY(angle);表示只在Y軸(垂直方向)傾斜。

3D轉換

CSS3 transform-style 屬性

值	描述
flat	表示所有子元素在2D平面呈現(xiàn)。
preserve-3d	表示所有子元素在3D空間中呈現(xiàn)。

3D 轉換方法

函數(shù)	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	3D 轉化。
translateX(x)	3D 轉化，僅使用用于 X 軸的值。
translateY(y)	3D 轉化，僅使用用于 Y 軸的值。
translateZ(z)	3D 轉化，僅使用用于 Z 軸的值。
scale3d(x,y,z)	3D 縮放轉換。
scaleX(x)	3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y)	3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z)	3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	3D 轉換元素的透視視圖。

transform-origin

transform-origin屬性用于設置3D變換的中心位置

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定義視圖被置于 X 軸的何處?？赡艿闹担簂eftcenterrightlength%
y-axis	定義視圖被置于 Y 軸的何處?？赡艿闹担簍opcenterbottomlength%
z-axis	定義視圖被置于 Z 軸的何處?？赡艿闹担簂ength

案例02



<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>


    <body>
        <h1>Css3 Transform</h1>
        <!-- Rotate-->
        <div class="card">
            <div class="box rotate">
                <div class="fill"></div>
            </div>
            <p>rotate(45deg) </p>
        </div>
        <div class="card">
            <div class="box rotateX">
                <div class="fill"></div>
            </div>
            <p>rotateX(45deg)</p>
        </div>
        <div class="card">
            <div class="box rotateY">
                <div class="fill"></div>
            </div>
            <p>rotateY(45deg)</p>
        </div>
        <div class="card">
            <div class="box rotateZ">
                <div class="fill"></div>
            </div>
            <p>rotateZ(45deg) </p>
        </div>
        <!-- scale-->
        <div class="card">
            <div class="box scale">
                <div class="fill"></div>
            </div>
            <p>scale(2)</p>
        </div>
        <div class="card">
            <div class="box scaleX">
                <div class="fill"></div>
            </div>
            <p>scaleX(2) </p>
        </div>
        <div class="card">
            <div class="box scaleY">
                <div class="fill"></div>
            </div>
            <p>scaleY(2) </p>
        </div>
        <!-- skew-->
        <div class="card">
            <div class="box skew">
                <div class="fill"></div>
            </div>
            <p>skew(45deg, 45deg) </p>
        </div>
        <div class="card">
            <div class="box skewX">
                <div class="fill"></div>
            </div>
            <p>skewX(45deg)</p>
        </div>
        <div class="card">
            <div class="box skewY">
                <div class="fill"></div>
            </div>
            <p>skewY(45deg)</p>
        </div>
        <!-- translate-->
        <div class="card">
            <div class="box translate">
                <div class="fill"></div>
            </div>
            <p>translate(45px) </p>
        </div>
        <div class="card">
            <div class="box translateX">
                <div class="fill"></div>
            </div>
            <p>translateX(45px)</p>
        </div>
        <div class="card">
            <div class="box translateY">
                <div class="fill"></div>
            </div>
            <p>translateY(45px)</p>
        </div>
        <div class="card">
            <div class="box matrix">
                <div class="fill"></div>
            </div>
            <p> matrix(2, 2, 0, 2, 45, 0)</p>
        </div>
        <h4>Perspective : 100</h4>
        <div class="perspective-100">
            <div class="card">
                <div class="box rotateX">
                    <div class="fill"></div>
                </div>
                <p>rotateX(90deg)</p>
            </div>
            <div class="card">
                <div class="box rotateY">
                    <div class="fill"></div>
                </div>
                <p>rotateY(45deg)</p>
            </div>
        </div>
        <h4>Perspective : 200</h4>
        <div class="perspective-200">
            <div class="card">
                <div class="box rotateX">
                    <div class="fill"></div>
                </div>
                <p>rotateX(90deg)</p>
            </div>
            <div class="card">
                <div class="box rotateY">
                    <div class="fill"></div>
                </div>
                <p>rotateY(45deg)</p>
            </div>
        </div>
        <!-- transform origin-->
        <h2>Transform origin</h2>
        <div class="card">
            <div class="box rotate">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 100% 0 0 <br/>rotate(45deg)</p>
        </div>
        <div class="card">
            <div class="box rotate">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>rotate(45deg)</p>
        </div>
        <div class="card perspective-200">
            <div class="box rotateX">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p>
        </div>
        <div class="card perspective-200">
            <div class="box rotateX">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>rotateX(45deg)</p>
        </div>
        <div class="card perspective-200">
            <div class="box rotateY">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0 <br/>rotateY(45deg)</p>
        </div>
        <div class="card perspective-200">
            <div class="box rotateY">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 100% 0 0<br/>rotateY(45deg)</p>
        </div>
        <div class="card">
            <div class="box scale">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 100% 0 0<br/>scale(2)</p>
        </div>
        <div class="card">
            <div class="box scale">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>scale(2)</p>
        </div>
        <div class="card">
            <div class="box scaleX">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 100% 0 0<br/>scaleX(2)</p>
        </div>
        <div class="card">
            <div class="box scaleX">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>scaleX(2)</p>
        </div>
        <div class="card">
            <div class="box scaleY">
                <div class="fill to-100-0-0"></div>
            </div>
            <p>transform-origin : 100% 0 0<br/>scaleY(2)</p>
        </div>
        <div class="card">
            <div class="box scaleY">
                <div class="fill to-0-100-0"></div>
            </div>
            <p>transform-origin : 0 100% 0<br/>scaleY(2)</p>
        </div>
    </body>


</html>

效果圖

CSS3 動畫

@keyframes規(guī)則是創(chuàng)建動畫。 @keyframes規(guī)則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

當在 @keyframes 創(chuàng)建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。

CSS3的動畫屬性

屬性	描述	CSS
@keyframes	規(guī)定動畫。	3
animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規(guī)定 @keyframes 動畫的名稱。	3
animation-duration	規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規(guī)定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規(guī)定動畫何時開始。默認是 0。	3
animation-iteration-count	規(guī)定動畫被播放的次數(shù)。默認是 1。Infinite:無限循環(huán)	3
animation-direction	規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"。	3
animation-play-state	規(guī)定動畫是否正在運行或暫停。默認是 "running"、“paused”。	3

animation-timing-function

指定動畫將如何完成一個周期。速度曲線定義動畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r間。速度曲線用于使變化更為平滑。

值	描述
linear	動畫從頭到尾的速度是相同的。
ease	默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
step-start	只顯示動畫第一幀
step-end	只顯示動畫最后一幀
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?nbsp;0 到 1 的數(shù)值。

#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}


#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}

animation-fill-mode

值	描述
none	默認值。動畫在動畫執(zhí)行之前和之后不會應用任何樣式到目標元素。
forwards	在動畫結束后（由 animation-iteration-count 決定），動畫將應用該屬性值。
backwards	動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。
both	動畫遵循 forwards 和 backwards 的規(guī)則。也就是說，動畫會在兩個方向上擴展動畫屬性。

animation-direction 屬性

值	描述
normal	默認值。動畫按正常播放。
reverse	動畫反向播放。
alternate	動畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。
alternate-reverse	動畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。

animation-play-state 屬性

值	描述
paused	指定暫停動畫
running	指定正在運行的動畫

案例03

<!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: myfirst 5s;
                animation-iteration-count: infinite;
            }
            @keyframes myfirst {
                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>
        <p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
        <div></div>
    </body>
</html>

效果展示

案例04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: red;
                position: relative;
                animation-name: myfirst;
                animation-duration: 5s;
                animation-timing-function: linear;
                animation-delay: 2s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-play-state: running;
                -webkit-animation-name: myfirst;
                -webkit-animation-duration: 5s;
                -webkit-animation-timing-function: linear;
                -webkit-animation-delay: 2s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-play-state: running;
            }
            @keyframes myfirst {
                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{
                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>
        <p>注意:該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
        <div></div>
    </body>
</html>

效果展示

CSS3 漸變（Gradients）

以前，你必須使用圖像來實現(xiàn)這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

CSS3 定義了兩種類型的漸變（gradients）：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

線性漸變

為了創(chuàng)建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。

語法

background: linear-gradient(direction direction, color stop1, color stop2, ...);

線性漸變 - 從上到下（默認情況下）

案例05

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>漸變</title>
        <style>
            #grad1 {
                height: 200px;
                background: -webkit-linear-gradient(left top,red 20%, blue 80%);
                background: -o-linear-gradient(left top,red 20%, blue 80%);
                background: -moz-linear-gradient(left top,red 20%, blue 80%);
                background: linear-gradient(left top,red 20%, blue 80%);
                /* 標準的語法（必須放在最后） */
            }
        </style>
    </head>
    <body>
        <h3>線性漸變 - 從上到下</h3>
        <p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>
        <div id="grad1"></div>
    </body>
</html>

效果圖

使用角度

如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。

background: linear-gradient(angle, color stop1, color stop2);

角度是指水平線和漸變線之間的角度，逆時針方向計算。

#grad { 
    background: -webkit-linear-gradient(180deg, red 30px, blue 120px); 
    background: -o-linear-gradient(180deg, red 30px, blue 120px); 
    background: -moz-linear-gradient(180deg, red 30px, blue 120px); 
    background: linear-gradient(180deg, red 30px, blue 120px); 
}

重復的線性漸變

repeating-linear-gradient() 函數(shù)用于重復線性漸變：

#grad {
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); 
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); 
    background: repeating-linear-gradient(red, yellow 10%, green 20%); 
}

徑向漸變

為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

語法

background: radial-gradient(position position, shape size, startColor size, ..., lastColor size);

徑向漸變 - 顏色結點均勻分布（默認情況下）

設置形狀

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

size 參數(shù)定義了漸變的大小。它可以是以下四個值：

closest-side - 靠近最近的邊
farthest-side - 靠近最遠的邊
closest-corner - 靠近最近的角
farthest-corner - 靠近最遠的角

#grad1 { 
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
}

重復的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復徑向漸變：

#grad {
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: repeating-radial-gradient(red, yellow 10%, green 15%); 
}

CSS3 媒體查詢

CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想：取代了查找設備的類型，CSS3 根據(jù)設置自適應顯示。

媒體查詢可用于檢測很多事情，例如：

viewport(視窗) 的寬度與高度
設備的寬度與高度
朝向 (智能手機橫屏，豎屏)
分辨率

目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。

@media not|only mediatype and (expressions) { CSS 代碼...; }

CSS3 多媒體類型

值	描述
all	用于所有多媒體類型設備
print	用于打印機
screen	用于電腦屏幕，平板，智能手機等。
speech	用于屏幕閱讀器CSS3 多媒體類型

CSS3 多媒體參數(shù)類型

值	描述
not	not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）
only	用來定某種特別的媒體類型。對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字并直接根據(jù)后面的表達式應用樣式文件。對于不支持Media Queries的設備但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
all	所有設備，這個應該經?？吹健?/td>

也可以在不同的媒體上使用不同的樣式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

常用尺寸

常用于圖片流

@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }

常用于稍微復雜的基本響應

@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }

基于Bootstrap 3.x 全球主流框架

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

基于Bootstrap 4.x 全球主流框架

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }

移動端頁面制作字號大小設定問題，設計稿文字字號規(guī)范，解決移動端大小屏適配問題

邏輯分辨率：320*480  《==》 物理分辨率：640*690       最小字號：12px
邏輯分辨率：320*658  《==》 物理分辨率：640*1136      最小字號：12px
邏輯分辨率：375*667  《==》 物理分辨率：750*1334      最小字號：14px(13.5px)
邏輯分辨率：414*736  《==》 物理分辨率：1242*2208（1080*1920） 最小字號：15px


前端按照邏輯分辨率設字號大小《==》rem進行適配移動端大小屏幕；

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

在屏幕可視窗口尺寸大于 480 像素的設備上修改背景顏色

案例06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>媒體查詢</title>
        <style>
            ul {
                list-style-type: none;
            }
            ul li a {
                color: green;
                text-decoration: none;
                padding: 3px;
                display: block;
            }
            @media screen and (min-width: 240px) and (max-width: 320px),(min-width: 700px) {
                ul li a {
                    padding-left: 30px;
                    color: blue;
                    background: url(image/email-icon.png) left center no-repeat;
                }
            }
            @media screen and (min-width: 320px) and (max-width: 480px) {
                ul li a {
                    color: red;
                }
                ul li a:before {
                    content: "郵箱:";
                    font-style: italic;
                    color: #666666;
                }
            }
            @media screen and (min-width: 480px) and (max-width: 640px) {
                ul li a:before {
                    content: "郵箱:";
                    font-style: italic;
                    color: lightcoral;
                }
                ul li a:after {
                    content: " (" attr(data-email) ")";
                    font-size: 12px;
                    font-style: italic;
                    color: #666666;
                }
            }
            @media screen and (min-width: 640px) {
                ul li a:before {
                    content: "郵箱:";
                    font-style: italic;
                    color: lightcoral;
                    padding-left: 30px;
                    background: url(image/email-icon.png) left center no-repeat;
                }
                ul li a:after {
                    content: " (" attr(data-email) ")";
                    font-size: 12px;
                    font-style: italic;
                    color: #666666;
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a data-email="johndoe@qq.com" href="mailto:johndoe@qq.com">張三</a></li>
            <li><a data-email="marymoe@qq.com" href="mailto:marymoe@qq.com">李四</a></li>
            <li><a data-email="amandapanda@qq.com" href="mailto:amandapanda@qq.com">王五</a></li>
        </ul>
    </body>
</html>

效果圖

Animate.css插件

Animate.css是某位大牛寫好的動畫效果集合，需要的時候可以直接下載導入到項目中，在需要的元素上添加相關的類即可使用相對應的動畫效果。

下載地址：https://animate.style/

下載后引入到html文件中即可使用。

使用：

<div id="test" class="animated infinite bounce ">bounce</div>

animated：表示使用Animate.css的動畫
infinite：表示動畫效果無限循環(huán)
bounce：是動畫效果

動畫效果有很多，下面的案例就展示了各種動畫效果

案例07



<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
        <style type="text/css">
            #content{
                padding-top: 20%;
            }
            #test {
                width: 50%;
                line-height: 100px;
                margin: auto;
                background-color: rgba(10, 10, 10, 0.2);
                text-align: center;
            }
            select{
                display: block;
                height: 45px;
                margin: auto;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                document.getElementById('select').onchange = function(){
                    val = this.options[this.selectedIndex].value;
                    document.getElementById('test').setAttribute('class','animated infinite '+val);
                }
            }
        </script>
    </head>


    <body>
        <div id="content">
            <div id="test">bounce</div>
        </div>
        <select id="select">
            <optgroup label="Attention Seekers">
                <option value="bounce">bounce</option>
                <option value="flash">flash</option>
                <option value="pulse">pulse</option>
                <option value="rubberBand">rubberBand</option>
                <option value="shake">shake</option>
                <option value="swing">swing</option>
                <option value="tada">tada</option>
                <option value="wobble">wobble</option>
                <option value="jello">jello</option>
            </optgroup>


            <optgroup label="Bouncing Entrances">
                <option value="bounceIn">bounceIn</option>
                <option value="bounceInDown">bounceInDown</option>
                <option value="bounceInLeft">bounceInLeft</option>
                <option value="bounceInRight">bounceInRight</option>
                <option value="bounceInUp">bounceInUp</option>
            </optgroup>


            <optgroup label="Bouncing Exits">
                <option value="bounceOut">bounceOut</option>
                <option value="bounceOutDown">bounceOutDown</option>
                <option value="bounceOutLeft">bounceOutLeft</option>
                <option value="bounceOutRight">bounceOutRight</option>
                <option value="bounceOutUp">bounceOutUp</option>
            </optgroup>


            <optgroup label="Fading Entrances">
                <option value="fadeIn">fadeIn</option>
                <option value="fadeInDown">fadeInDown</option>
                <option value="fadeInDownBig">fadeInDownBig</option>
                <option value="fadeInLeft">fadeInLeft</option>
                <option value="fadeInLeftBig">fadeInLeftBig</option>
                <option value="fadeInRight">fadeInRight</option>
                <option value="fadeInRightBig">fadeInRightBig</option>
                <option value="fadeInUp">fadeInUp</option>
                <option value="fadeInUpBig">fadeInUpBig</option>
            </optgroup>


            <optgroup label="Fading Exits">
                <option value="fadeOut">fadeOut</option>
                <option value="fadeOutDown">fadeOutDown</option>
                <option value="fadeOutDownBig">fadeOutDownBig</option>
                <option value="fadeOutLeft">fadeOutLeft</option>
                <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                <option value="fadeOutRight">fadeOutRight</option>
                <option value="fadeOutRightBig">fadeOutRightBig</option>
                <option value="fadeOutUp">fadeOutUp</option>
                <option value="fadeOutUpBig">fadeOutUpBig</option>
            </optgroup>


            <optgroup label="Flippers">
                <option value="flip">flip</option>
                <option value="flipInX">flipInX</option>
                <option value="flipInY">flipInY</option>
                <option value="flipOutX">flipOutX</option>
                <option value="flipOutY">flipOutY</option>
            </optgroup>


            <optgroup label="Lightspeed">
                <option value="lightSpeedIn">lightSpeedIn</option>
                <option value="lightSpeedOut">lightSpeedOut</option>
            </optgroup>


            <optgroup label="Rotating Entrances">
                <option value="rotateIn">rotateIn</option>
                <option value="rotateInDownLeft">rotateInDownLeft</option>
                <option value="rotateInDownRight">rotateInDownRight</option>
                <option value="rotateInUpLeft">rotateInUpLeft</option>
                <option value="rotateInUpRight">rotateInUpRight</option>
            </optgroup>


            <optgroup label="Rotating Exits">
                <option value="rotateOut">rotateOut</option>
                <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                <option value="rotateOutDownRight">rotateOutDownRight</option>
                <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                <option value="rotateOutUpRight">rotateOutUpRight</option>
            </optgroup>


            <optgroup label="Sliding Entrances">
                <option value="slideInUp">slideInUp</option>
                <option value="slideInDown">slideInDown</option>
                <option value="slideInLeft">slideInLeft</option>
                <option value="slideInRight">slideInRight</option>
            </optgroup>

            
            <optgroup label="Sliding Exits">
                <option value="slideOutUp">slideOutUp</option>
                <option value="slideOutDown">slideOutDown</option>
                <option value="slideOutLeft">slideOutLeft</option>
                <option value="slideOutRight">slideOutRight</option>
            </optgroup>


            <optgroup label="Zoom Entrances">
                <option value="zoomIn">zoomIn</option>
                <option value="zoomInDown">zoomInDown</option>
                <option value="zoomInLeft">zoomInLeft</option>
                <option value="zoomInRight">zoomInRight</option>
                <option value="zoomInUp">zoomInUp</option>
            </optgroup>


            <optgroup label="Zoom Exits">
                <option value="zoomOut">zoomOut</option>
                <option value="zoomOutDown">zoomOutDown</option>
                <option value="zoomOutLeft">zoomOutLeft</option>
                <option value="zoomOutRight">zoomOutRight</option>
                <option value="zoomOutUp">zoomOutUp</option>
            </optgroup>


            <optgroup label="Specials">
                <option value="hinge">hinge</option>
                <option value="jackInTheBox">jackInTheBox</option>
                <option value="rollIn">rollIn</option>
                <option value="rollOut">rollOut</option>
            </optgroup>
        </select>
    </body>


</html>

效果展示

Wow.js插件

Wow.js是javascript動畫插件，經常配合animate.css一起使用。動畫效果會在元素第一次出現(xiàn)在頁面中時起作用。

下載地址：https://www.delac.io/WOW/

Wow.js的使用方法

引入wow.js
在需要使用的元素上添加class=”wow”
使用js初始化

案例08

<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
        <script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #content {
                padding-top: 20%;
            }

            
            #test {
                width: 50%;
                line-height: 100px;
                margin: auto;
                background-color: rgba(10, 10, 10, 0.2);
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            var wow = new WOW({
                boxClass: 'wow', // 動畫使用的class
                animateClass: 'animated infinite', // 附加的class
                offset: 0, // 當元素進入頁面多少位置的時候開始動畫，默認0
                mobile: true, // 是否在移動設備上顯示動畫效果，默認true
                live: true, // 是否異步加載內容，默認true
                callback: function(box) {},
                scrollContainer: null
            });
            wow.init();
        </script>
    </head>


    <body>
        <div id="content">
            <div id="test" class="wow bounce">bounce</div>
        </div>
    </body>


</html>

第07章-CSS3動畫特效

第07章-前端核心技術-CSS3動畫特效

項目經理(作者)：張明星

學習目標

CSS3 過渡transition

案例01

CSS3 轉換transform

2D 轉換

translate(?px/%) 位置變換

rotate(?deg) 旋轉

scale(x,y) 尺寸改變

skew(?deg,?deg) 傾斜

3D轉換

transform-origin

案例02

CSS3 動畫

animation-timing-function

animation-fill-mode

animation-direction 屬性

animation-play-state 屬性

案例03

案例04

CSS3 漸變（Gradients）

線性漸變

案例05

使用角度

重復的線性漸變

徑向漸變

設置形狀

重復的徑向漸變

CSS3 媒體查詢

常用尺寸

案例06

Animate.css插件

案例07

Wow.js插件

案例08

推薦文章

推薦教程

推薦課程