複習css3的部分屬性

css3:

1、圓角

border-radius:100%;

border-top-left-radius:5px;

2、變形

3、動畫

animation使用方法：

3.1、利用@keyframes定義動畫效果：

@keyframes animatename------必備，表示動畫開始時的效果

30% ------非必備，表示經過了整個動畫時間（乙個週期）的3/10後的效果

100% ------必備（當只有0%和100%是可以用from和to代替），表示動畫結束時的效果

}

3.2、在某節點上使用動畫，同時定義動畫的下列屬性，如

其中：動畫的速度曲線animation-timing-function（預設值為ease，常用的為linear）

如果要無限次執行動畫，則定義

"forwards"表示動畫結束後保持在keyframes中最後一幀100%時的狀態，

"both"表示同時應用"forwards"和"backwards"。

練習例項：乙個div在前一秒內，top由0到50px，後一秒內，選擇一圈且下降到100px，同時慢慢變透明。

@keyframes down50%  100% }
@-webkit-keyframes down50%  100% }
@-moz-keyframes down50%  100% }
@-o-keyframes down50%  100% }
#object1

按上面寫法，會在object1載入後就立馬開始動畫。

練習例項1：

object1

#object1

$('#inputtest').click(function
());},2000);   
})

練習例項2：

objecttest

練習例項1的**其實就是下面這樣：

.downanimation

$('#input1').click(function
())document.getelementbyid('object1').addeventlistener("webkitanimationend", function
(e) );
......（省略了為animationend、mozanimationend、oanimationend新增事件）

animation事件：共有三個事件：

還可以通過事件函式的引數的elapsedtime屬性獲得動畫開始到此時經過的時間（單位為s，不包括animation-delay時間）。

在js中控制這些屬性

：

document.getelementbyid('id1').style.animationplaystate='paused'; 
document.getelementbyid('id').style.webkitanimationplaystate='paused';

在style中定義：

注意：internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。

chrome 和 safari 需要字首 -webkit-。

4、transition

作用是：當屬性改變時，在一定時間內將屬性有初始值（平滑的）改變到新的屬性值，如：

transition:all 1s ease-in-out;

transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性：

transition也有乙個animationend事件。

練習例項：移上div時(或是別的事件)，加陰影，字型變粗

#div1#div1:hover

div1

transition中的屬性變化也可以分開寫：

transition: background 0.5s ease-in,color 0.3s linear;

CSS部分屬性學習

css背景 background color 定義了元素的背景顏色background image 描述了元素的背景影象，預設情況下，背景影象進行平鋪重複顯示，以覆蓋整個元素實體background repeat 設定平鋪還是不平鋪，預設是平鋪，no repeat是不平鋪background pos...

location的部分屬性

location.host 可以設定或返回主機名和當前url的埠 www.w3school.com.cn 如果有埠號還會獲取到埠號如果要訪問乙個位址可以不用協議頭但要多新增 let url location.host jsref dom obj location.asp location.prot...

CSS3新增部分常用屬性總結

1.border color 為邊框設定顏色相關屬性 border top color,border right color,border bottom color border left color 2.border image 邊框 border image image number perc...

複習css3的部分屬性

CSS部分屬性學習

location的部分屬性

CSS3新增部分常用屬性總結

相關推薦