1、潭州教育-前端開發-15期過渡-自定義動畫主講人：追夢 01CSS3 01 HTML5+CSS3一、邊框圓角border-radius:上 右 下 左; /取值和margin風格類似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: 空格/縮進/換行的

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

3、e:nowrap; /*文本不換行*/overflow:hidden; /*超出隱藏*/text-overflow:ellipsis; /*顯示省略號*/CSS3 01 HTML5+CSS35.text-shadow: 文字陰影參數：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.文字大小寫 text-transform:none：默認值 無轉換 capitalize：將每個單詞的第一個字母轉換成大寫 uppercase：轉換成大寫 lowercase：轉換成小寫CSS3 01 HTML5+CSS3三、過渡1.transition: property duration delay timing-function; 可以缺省transition-property:過渡屬性的名稱none 沒有過渡屬性all 所有屬性都過渡(默認值)property 具體屬性名稱(property1,property2.)transition-duration:過渡屬性花費的時間

6、秒/毫秒transition-delay:過渡效果延遲時間秒/毫秒transition-timing-function:過渡效果速度曲線 運動形式linear / 規定以相同速度開始至結束的過渡效果ease / 規定慢速開始，然后變快，然后慢速結束的過渡效果ease-in / 規定以慢速開始的過渡效果ease-out / 規定以慢速結束的過渡效果ease-in-out 規定以慢速開始和結束的過渡效果CSS3 01 HTML5+CSS32.過渡完成事件：Webkit內核： obj.addEventListener(webkitTransitionEnd,function();標準: obj.ad

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

8、out / ease-in-outanimation-iteration-count: 動畫執行次數次數數值 / infinite無限重復animation-direction:動畫執行方向normal正常/alternate 動畫輪流反向播放CSS3 01 HTML5+CSS3animation-play-state:動畫執行狀態paused 暫停動畫 / running 運行動畫animation-fill-mode:動畫執行過程效果是否可見none 不改變（默認） forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）CSS3 01 HTML5+CSS3keyfra

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