亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入CSS3 動(dòng)畫效果的總結(jié)詳解

  發(fā)布時(shí)間：2013-05-09 16:55:49   作者：佚名   我要評(píng)論
本篇文章是對(duì),CSS3中的動(dòng)畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下

CSS3添加了幾個(gè)動(dòng)畫效果的屬性，通過設(shè)置這些屬性，可以做出一些簡單的動(dòng)畫效果而不需要再去借助JavaScript。CSS3動(dòng)畫的屬性主要分為三類：transform、transition以及animation。

transform

rotate

設(shè)置元素順時(shí)針旋轉(zhuǎn)的角度，用法是：

transform: rotate(x);

參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

scale

設(shè)置元素放大或縮小的倍數(shù)，用法包括：

transform: scale(a);                  元素x和y方向均縮放a倍

transform: scale(a, b);              元素x方向縮放a倍，y方向縮放b倍

transform: scaleX(a);                元素x方向縮放a倍，y方向不變

transform: scaleY(b);                元素y方向縮放b倍，x方向不變

translate

設(shè)置元素的位移，用法為：

transform: translate(a, b);                元素x方向位移a，y方向位移b

transform: translateX(a);                  元素x方向位移a，y方向不變

transform: translateY(b);                  元素y方向位移b，x方向不變

skew

設(shè)置元素傾斜的角度，用法包括：

transform: skew(a, b);              元素x方向逆時(shí)針傾斜角度a，y方向順時(shí)針傾斜角度b

transform: skewX(a);                元素x方向逆時(shí)針傾斜角度a，y方向不變

transform: skewY(b);                元素y方向順時(shí)針傾斜角度b，想方向不變

以上的參數(shù)均必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

matrix

設(shè)置元素的變形矩陣，因?yàn)榫仃囎冃芜^于復(fù)雜，暫略。

origin

設(shè)置元素的懸掛點(diǎn)，用法包括：

transform-origin: a b;                元素的懸掛點(diǎn)為(a, b)

元素的懸掛點(diǎn)即為它旋轉(zhuǎn)和傾斜時(shí)的中心點(diǎn)。取值中的a、b可以是長度值、以%結(jié)尾的百分比或者left、top、right、bottom四個(gè)值。

transition

transition-property

指定transition效果作用的CSS屬性，其值是CSS屬性名。

transition-duration

動(dòng)畫效果持續(xù)的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

transition-timing-function

指定元素狀態(tài)的變化速率函數(shù)，其取值基于貝賽爾曲線函數(shù)，詳情如下所示：


transition-delay

動(dòng)畫效果推遲開始執(zhí)行的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

CSS3動(dòng)畫的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關(guān)系：



animation

CSS3中真正的動(dòng)畫屬性是animation，而前面的transform和transition都只是對(duì)DOM元素的變形或者是狀態(tài)的過渡。實(shí)際上，CSS3所支持的動(dòng)畫效果只是填充動(dòng)畫，也就是說先設(shè)定整個(gè)動(dòng)畫生命周期中的幾個(gè)關(guān)鍵狀態(tài)（key  frame，關(guān)鍵幀），然后動(dòng)畫將自行計(jì)算并模擬關(guān)鍵幀之間的過渡。那么在設(shè)置animation的屬性之前就必須先設(shè)定好關(guān)鍵幀了。

關(guān)鍵幀@keyframes的語法結(jié)構(gòu)如下：

@keyframesNAME {

         a% {

         /*CSS屬性*/

         }

         b% {

                  /*CSS屬性*/

         }

         ...

}

NAME表示動(dòng)畫的名字；a%、b%表示以百分號(hào)結(jié)尾的百分?jǐn)?shù)，用于設(shè)定該關(guān)鍵幀在動(dòng)畫生命周期中的位置；百分?jǐn)?shù)后面的{ } 中則需要寫成該關(guān)鍵幀狀態(tài)下CSS屬性的值。另外，如果同一個(gè)百分?jǐn)?shù)值在@keyframes中出現(xiàn)多次，那么后出現(xiàn)的將覆蓋先出現(xiàn)的；并且關(guān)鍵幀在@keyframes中時(shí)無序的。

設(shè)置完關(guān)鍵幀后就可以繼續(xù)設(shè)定animation了。

animation-name

指定選用的動(dòng)畫的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

設(shè)定動(dòng)畫執(zhí)行的次數(shù)，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）。

animation-direction

設(shè)定動(dòng)畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

前綴

因?yàn)镃SS3還沒有正式發(fā)布，所以各種瀏覽器對(duì)它的支持也不盡相同。所以在設(shè)置CSS3屬性（包括@開頭的新屬性）的時(shí)候通常需要對(duì)其添加瀏覽器標(biāo)識(shí)的前綴，如-webkit- 表示W(wǎng)ebkit內(nèi)核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無視IE吧，在IE上的實(shí)現(xiàn)通常還是要用到濾鏡，而不是CSS3。

實(shí)例

下面的代碼模擬了上述大部分的CSS3動(dòng)畫屬性，由于只使用了–webkit- 前綴，所以只能在Chrome或Safari下正常運(yùn)行。

HTML代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3動(dòng)畫</title>
<link type="text/css" rel="stylesheet" href="animation.css" />
</head></p> <p><body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html>&nbsp;


CSS代碼：

animation.css


復(fù)制代碼
代碼如下:

div {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: #06F;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 10px;
margin: 5px;
}</p> <p>.rotate {
-webkit-transform: rotate(0deg);
}</p> <p>.rotate:hover {
-webkit-transform: rotate(90deg);
}</p> <p>.scale {
-webkit-transform: scale(1);
}</p> <p>.scale:hover {
-webkit-transform: scale(1.5);
}</p> <p>.translate {
-webkit-transform: translate(0px, 0px);
}</p> <p>.translate:hover {
-webkit-transform: translate(50px, 50px);
}</p> <p>.skew {
-webkit-transform: skew(0);
}</p> <p>.skew:hover {
-webkit-transform: skewY(20deg);
}</p> <p>.origin {
-webkit-transform-origin: top left;
-webkit-transform: rotate(0);
}</p> <p>.origin:hover {
-webkit-transform: rotate(45deg);
}</p> <p>.single {
width: 150px;
}</p> <p>.single:hover {
background: #f00;
width: 200px;
height: 100px;
line-height: 100px;
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
}</p> <p>.whole {
width: 150px;
}</p> <p>.whole:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}</p> <p>.resume {
width: 150px;
-webkit-transition-duration: 2s;
}</p> <p>.resume:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}</p> <p>.animation:hover {
-webkit-animation-name: anim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}</p> <p>@-webkit-keyframes anim {
0% {
width: 80px;
height: 30px;
line-height: 30px;
background: #06F;
}
50% {
width: 140px;
height: 65px;
line-height: 65px;
background: #360;
}
100% {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
}
}


相關(guān)文章

  • 簡要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)

    這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-08-03

  • CSS的一些編程規(guī)范總結(jié)

    這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開發(fā)者的共識(shí),樹立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下
    2015-07-09

  • 10個(gè)必備的CSS技巧總結(jié)

    這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下
    2015-06-29

  • CSS清除浮動(dòng)方法總結(jié)

    在阿里云首頁看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請(qǐng)問這樣的意義是什么呢?研究了一番，原來是清除浮動(dòng)用的，下面來總結(jié)下清除浮動(dòng)
    2014-06-17

  • css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)

    主要記錄本人調(diào)試過程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品
    2014-06-15

  • CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))

    多瀏覽器兼容一直都是前端開發(fā)者需要考慮的重要問題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過之后感覺不錯(cuò)的可以收藏哦
    2013-10-30

  • CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)

    進(jìn)行css布局的同時(shí)，沒有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助
    2013-10-05

  • IE下css常見問題總結(jié)及解決

    本文整理了ie中div的垂直居中問題、margin加倍的問題、ie6下頁面min-width/height與max-width/height問題、ie6 3px bug及ie6捉迷藏的問題等等，感興趣的朋友可以參考下哈
    2013-04-01

  • CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語總結(jié)

    CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來詳細(xì)為您介紹，需要了解的朋友可以參考下
    2013-01-03

  • CSS學(xué)習(xí)和總結(jié)

    本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
    2022-09-29

最新評(píng)論