第07章-CSS3動(dòng)畫特效

2022-05-18 23:32 更新

第07章-前端核心技術(shù)-CSS3動(dòng)畫特效

項(xiàng)目經(jīng)理(作者)：張明星

學(xué)習(xí)目標(biāo)

  1. 掌握CSS3特效的制作 重點(diǎn)
  2. 掌握CSS3各種轉(zhuǎn)換的特效 重點(diǎn)
  3. 掌握CSS3動(dòng)畫的制作 重點(diǎn)
  4. 掌握CSS3漸變色的使用
  5. 掌握CSS3響應(yīng)式設(shè)計(jì) 難點(diǎn)

CSS3 過渡transition

過渡屬性

屬性 描述
transition 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。
transition-timing-function 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。
transition-delay 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 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 轉(zhuǎn)換transform

轉(zhuǎn)換屬性

Property 描述
transform 適用于2D或3D轉(zhuǎn)換的元素

2D 轉(zhuǎn)換

函數(shù) 描述
matrix(n,n,n,n,n,n) 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。（選修）
translate(x,y) 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素。
translateX(n) 2D 轉(zhuǎn)換，沿著 X 軸移動(dòng)元素。
translateY(n) 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素。
scaleX(n) 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾取?/td>
scaleY(n) 2D 縮放轉(zhuǎn)換，改變?cè)氐母叨取?/td>
rotate(angle) 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle) 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。
skewX(angle) 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
skewY(angle) 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

translate(?px/%) 位置變換

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

rotate(?deg) 旋轉(zhuǎn)

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

scale(x,y) 尺寸改變

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

skew(?deg,?deg) 傾斜

transform:skew(angle [,angle]);

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

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

3D轉(zhuǎn)換

CSS3 transform-style 屬性

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

3D 轉(zhuǎn)換方法

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

transform-origin

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

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

值 描述
x-axis 定義視圖被置于 X 軸的何處?？赡艿闹担簂eftcenterrightlength%
y-axis 定義視圖被置于 Y 軸的何處。可能的值：topcenterbottomlength%
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 動(dòng)畫

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

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

CSS3的動(dòng)畫屬性

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

animation-timing-function

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

值 描述
linear 動(dòng)畫從頭到尾的速度是相同的。
ease 默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
ease-in 動(dòng)畫以低速開始。
ease-out 動(dòng)畫以低速結(jié)束。
ease-in-out 動(dòng)畫以低速開始和結(jié)束。
step-start 只顯示動(dòng)畫第一幀
step-end 只顯示動(dòng)畫最后一幀
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 默認(rèn)值。動(dòng)畫在動(dòng)畫執(zhí)行之前和之后不會(huì)應(yīng)用任何樣式到目標(biāo)元素。
forwards 在動(dòng)畫結(jié)束后（由 animation-iteration-count 決定），動(dòng)畫將應(yīng)用該屬性值。
backwards 動(dòng)畫將應(yīng)用在 animation-delay 定義期間啟動(dòng)動(dòng)畫的第一次迭代的關(guān)鍵幀中定義的屬性值。這些都是 from 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "normal" 或 "alternate" 時(shí)）或 to 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "reverse" 或 "alternate-reverse" 時(shí)）。
both 動(dòng)畫遵循 forwards 和 backwards 的規(guī)則。也就是說，動(dòng)畫會(huì)在兩個(gè)方向上擴(kuò)展動(dòng)畫屬性。

animation-direction 屬性

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

animation-play-state 屬性

值 描述
paused 指定暫停動(dòng)畫
running 指定正在運(yùn)行的動(dòng)畫

案例03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>動(dòng)畫</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> 該實(shí)例在 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>注意:該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
        <div></div>
    </body>
</html>

效果展示

CSS3 漸變（Gradients）

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

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

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

線性漸變

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

語法

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

線性漸變 - 從上到下（默認(rèn)情況下）

案例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%);
                /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
            }
        </style>
    </head>
    <body>
        <h3>線性漸變 - 從上到下</h3>
        <p>從頂部開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：</p>
        <div id="grad1"></div>
    </body>
</html>

效果圖

使用角度

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

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

角度是指水平線和漸變線之間的角度，逆時(shí)針方向計(jì)算。

#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); 
}

重復(fù)的線性漸變

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

#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)建一個(gè)徑向漸變，你也必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。

語法

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

徑向漸變 - 顏色結(jié)點(diǎn)均勻分布（默認(rèn)情況下）

設(shè)置形狀

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

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

  • closest-side - 靠近最近的邊
  • farthest-side - 靠近最遠(yuǎn)的邊
  • closest-corner - 靠近最近的角
  • farthest-corner - 靠近最遠(yuǎn)的角

#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); 
}

重復(fù)的徑向漸變

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

#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 多媒體類型的所有思想： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示。

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

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

目前很多針對(duì)蘋果手機(jī)，Android 手機(jī)，平板等設(shè)備都會(huì)使用到多媒體查詢。

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

CSS3 多媒體類型

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

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

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

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

<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) { ... }

常用于稍微復(fù)雜的基本響應(yīng)

@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) { ... }

移動(dòng)端頁面制作字號(hào)大小設(shè)定問題，設(shè)計(jì)稿文字字號(hào)規(guī)范，解決移動(dòng)端大小屏適配問題

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


前端按照邏輯分辨率設(shè)字號(hào)大小《==》rem進(jìn)行適配移動(dòng)端大小屏幕；

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

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

案例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是某位大牛寫好的動(dòng)畫效果集合，需要的時(shí)候可以直接下載導(dǎo)入到項(xiàng)目中，在需要的元素上添加相關(guān)的類即可使用相對(duì)應(yīng)的動(dòng)畫效果。

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

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

使用：

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

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

動(dòng)畫效果有很多，下面的案例就展示了各種動(dòng)畫效果

案例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動(dòng)畫插件，經(jīng)常配合animate.css一起使用。動(dòng)畫效果會(huì)在元素第一次出現(xiàn)在頁面中時(shí)起作用。

下載地址：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', // 動(dòng)畫使用的class
                animateClass: 'animated infinite', // 附加的class
                offset: 0, // 當(dāng)元素進(jìn)入頁面多少位置的時(shí)候開始動(dòng)畫，默認(rèn)0
                mobile: true, // 是否在移動(dòng)設(shè)備上顯示動(dòng)畫效果，默認(rèn)true
                live: true, // 是否異步加載內(nèi)容，默認(rèn)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>

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)