公開課資料 前端公開課 2018年 公開課資料整理中1118 公開課內(nèi)容 純css3多云轉(zhuǎn)晴 kpd

Css云彩運(yùn)動(dòng)什么是 CSS3 中的動(dòng)畫？動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果?？梢愿淖?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 from 和 to，等同于 0% 和 100%。0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。為了得到最佳的瀏覽器支持，應(yīng)該始終定義 0% 和 100% 選擇器。1、animation css動(dòng)畫animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction注釋：請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)播放動(dòng)畫了。語(yǔ)法animation: name duration timing-function delay iteration-count direction;值描述animation-name規(guī)定需要綁定到選擇器的 keyframe 名稱。animation-duration規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。animation-timing-function規(guī)定動(dòng)畫的速度曲線。animation-delay規(guī)定在動(dòng)畫開始之前的延遲。animation-iteration-count規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。animation-direction規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。2、 transform 旋轉(zhuǎn) div 元素：瀏覽器支持Internet Explorer 10、Firefox、Opera 支持 transform 屬性。Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。Opera 只支持 2D 轉(zhuǎn)換。定義和用法transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。為了更好地理解 transform 屬性，請(qǐng)查看這個(gè)演示。默認(rèn)值：none繼承性：no版本：CSS3JavaScript 語(yǔ)法：object.style.transform=rotate(7deg)語(yǔ)法transform: none|transform-functions;值描述測(cè)試none定義不進(jìn)行轉(zhuǎn)換。測(cè)試matrix(n,n,n,n,n,n)定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。測(cè)試matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。translate(x,y)定義 2D 轉(zhuǎn)換。測(cè)試translate3d(x,y,z)定義 3D 轉(zhuǎn)換。translateX(x)定義轉(zhuǎn)換，只是用 X 軸的值。測(cè)試translateY(y)定義轉(zhuǎn)換，只是用 Y 軸的值。測(cè)試translateZ(z)定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。scale(x,y)定義 2D 縮放轉(zhuǎn)換。測(cè)試scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換。scaleX(x)通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。測(cè)試scaleY(y)通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。測(cè)試scaleZ(z)通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。rotate(angle)定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。測(cè)試rotate3d(x,y,z,angle)定義 3D 旋轉(zhuǎn)。rotateX(angle)定義沿著 X 軸的 3D 旋轉(zhuǎn)。測(cè)試rotateY(angle)定義沿著 Y 軸的 3D 旋轉(zhuǎn)。測(cè)試rotateZ(angle)定義沿著 Z 軸的 3D 旋轉(zhuǎn)。測(cè)試skew(x-angle,y-angle)定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。測(cè)試skewX(angle)定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。測(cè)試skewY(angle)定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。測(cè)試perspective(n)為 3D 轉(zhuǎn)換元素定義透視視圖。測(cè)試4、keyframes 規(guī)則使 div 元素勻速向下移動(dòng)：目前瀏覽器都不支持 keyframes 規(guī)則。Firefox 支持替代的 -moz-keyframes 規(guī)則。Opera 支持替代的 -o-keyframes 規(guī)則。Safari 和 Chrome 支持替代的 -webkit-keyframes 規(guī)則。定義和用法通過(guò) keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，您能夠多次改變這套 CSS 樣式。以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 from 和 to，等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。注釋：請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。語(yǔ)法keyframes animationname keyframes-selector css-styles;值描述animation