過(guò)渡和自定義屬性課件04css3

1、潭州教育-前端開(kāi)發(fā)-15期過(guò)渡-自定義動(dòng)畫(huà)主講人：追夢(mèng) 01CSS3 01 HTML5+CSS3一、邊框圓角border-radius:上 右 下 左; /取值和margin風(fēng)格類(lèi)似border-top-left-radius:border-top-right-radius:border-bottom-left-radius:border-bottom-right-radius:20px 30px 40px 50px/40px 50px 60px 70px;斜線左邊是水平方向 / 斜線右邊是垂直方向CSS3 01 HTML5+CSS3二、文本屬性1.white-space: 空格/縮進(jìn)/換行的

2、處理方式 normal 默認(rèn) 忽略多個(gè)空格/縮進(jìn)/換行只留一個(gè)nowrap 控制文本不換行pre 空白/縮進(jìn)/換行 會(huì)被瀏覽器保留pre-line 合并空白/縮進(jìn) 保留換行符pre-wrap 保留空白/縮進(jìn) 正常換行2.Word-wrap:break-word 與 word-break:break-all CSS3 01 HTML5+CSS33.文本從右向左顯示：direction:rtl; /ltr rtlunicode-bidi:bidi-override;CSS3 01 HTML5+CSS34.文本超出顯示省略號(hào)前端只是一個(gè)效果單行超出顯示省略號(hào)： 低版本 ie不兼容white-spac

3、e:nowrap; /*文本不換行*/overflow:hidden; /*超出隱藏*/text-overflow:ellipsis; /*顯示省略號(hào)*/CSS3 01 HTML5+CSS35.text-shadow: 文字陰影參數(shù)：x方向偏移 y方向偏移 模糊度 顏色浮雕例子color:#fff;text-shadow:2px 2px 4px #000;立體字color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #9c9c9c,0 3px 0 #bbb,0 4px 0 #9b9b9b,0 5px 0 #aaa;模糊字color:rgba(0,0,0,0);

4、text-shadow:0 0 20px blue;元素陰影box-shadow:inset x y 模糊度 尺寸 顏色CSS3 01 HTML5+CSS36.文字描邊、文字填充text-stroke:/*寬 顏色*/ 描邊 加兼容前綴text-fill-width:/*寬度*/text-fill-color:/*顏色*/ 填充色霓虹燈：text-shadow:0px 0px 10px #f3c,0px 0px 20px #f39,0px 0px 40px #f33,0px 0px 60px #f30;-webkit-text-stroke:1px #ff00ff;CSS3 01 HTML5+

5、CSS37.文字大小寫(xiě) text-transform:none：默認(rèn)值 無(wú)轉(zhuǎn)換 capitalize：將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫(xiě) uppercase：轉(zhuǎn)換成大寫(xiě) lowercase：轉(zhuǎn)換成小寫(xiě)CSS3 01 HTML5+CSS3三、過(guò)渡1.transition: property duration delay timing-function; 可以缺省transition-property:過(guò)渡屬性的名稱(chēng)none 沒(méi)有過(guò)渡屬性all 所有屬性都過(guò)渡(默認(rèn)值)property 具體屬性名稱(chēng)(property1,property2.)transition-duration:過(guò)渡屬性花費(fèi)的時(shí)間

6、秒/毫秒transition-delay:過(guò)渡效果延遲時(shí)間秒/毫秒transition-timing-function:過(guò)渡效果速度曲線 運(yùn)動(dòng)形式linear / 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果ease / 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果ease-in / 規(guī)定以慢速開(kāi)始的過(guò)渡效果ease-out / 規(guī)定以慢速結(jié)束的過(guò)渡效果ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果CSS3 01 HTML5+CSS32.過(guò)渡完成事件：Webkit內(nèi)核： obj.addEventListener(webkitTransitionEnd,function();標(biāo)準(zhǔn): obj.ad

7、dEventListener(transitionend,function();CSS3 01 HTML5+CSS3四、動(dòng)畫(huà)1.animation: name duration delay timing-function iteration-count direction;animation-name: 動(dòng)畫(huà)名稱(chēng)keyframename 自定義的名字none 無(wú)動(dòng)畫(huà)效果animation-duration: 動(dòng)畫(huà)執(zhí)行時(shí)間animation-delay:動(dòng)畫(huà)效果延遲時(shí)間animation-timing-function: 動(dòng)畫(huà)速度曲線linear / ease / ease-in / ease-

8、out / ease-in-outanimation-iteration-count: 動(dòng)畫(huà)執(zhí)行次數(shù)次數(shù)數(shù)值 / infinite無(wú)限重復(fù)animation-direction:動(dòng)畫(huà)執(zhí)行方向normal正常/alternate 動(dòng)畫(huà)輪流反向播放CSS3 01 HTML5+CSS3animation-play-state:動(dòng)畫(huà)執(zhí)行狀態(tài)paused 暫停動(dòng)畫(huà) / running 運(yùn)行動(dòng)畫(huà)animation-fill-mode:動(dòng)畫(huà)執(zhí)行過(guò)程效果是否可見(jiàn)none 不改變（默認(rèn)） forwards 當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）CSS3 01 HTML5+CSS3keyfra

9、mes:規(guī)定動(dòng)畫(huà)keyframes animationname keyframes-selector css-styles;animationname 定義動(dòng)畫(huà)的名稱(chēng)。keyframes-selector 動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。0-100%from（與 0% 相同）to（與 100% 相同）可以只有tocss-styles 一個(gè)或多個(gè)合法的 CSS 樣式屬性。CSS3 01 HTML5+CSS3動(dòng)畫(huà)事件：動(dòng)畫(huà)開(kāi)始觸發(fā)：obj.addEventListener(webkitAnimationStart, fn);obj.addEventListener(animationstart, fn);動(dòng)畫(huà)執(zhí)行過(guò)程中觸發(fā)：obj.addEventListener(webkitAnimationIteration, fn);obj.addE