css3動畫屬性

animation-name屬性定義要使用哪個動畫.

在下面的例子中,動畫的名稱設置為最后篇章,它與定義的關鍵幀相匹配

css代碼:

div.width-animation{animation-name:最后篇章; animation-duration:10s;}

@keyframes 最后篇章 {from{width:0px;}to{width:120px;}}

效果如下:

<div>元素的內容由豎排,自動變為橫排.

animation-duration屬性以秒為單位,指定所選動畫的持續時間.

如果動畫名稱與任何關鍵幀規則不匹配,則動畫將不會執行.

animation-timing-function屬性指定動畫的速度曲線.它有以下值:

●ease:指定一個慢啟動的動畫,然后快速,然后慢慢結束(默認值)

●ease-in:指定一個慢啟動的動畫

●ease-out:指定一個緩慢結束的動畫.

●ease-in-out:指定一個緩慢的開始和結束的動畫.

●cubic-bezier(n,n,n,n):讓你在一個cubic-bezier函數中定義你自己的值.

css代碼:

animation-timing-function:linear;

animation-delay定義動畫開始之前的延遲.

css代碼:

animation-delay:2s;

animation-delay和animation-duration的屬性值可以用秒和毫秒來定義.

animation-iteration-count屬性確定動畫重復的次數.

例如,你可以將動畫設置為運行6次.

animation-iteration-count:6;

為了使動畫永久重復,只需使用無限值:

animation-iteration-count:infinite;

animation-direction:指定如何應用關鍵幀,值可以設置為:

1.normal(默認值):這意味著它從0%到100%前進

2.reverse:從100%到0%的方向播放關鍵幀動畫

3.alternate:動畫首先向前,然后向后,然后向前.

4.alternate reverse:動畫首先先倒退,然后向前,然后倒退.

如果對animation-iteration-count的值使用0或負數,動畫將永遠不會啟動.

div{ animation-name:colorchange; animation-duration:3s;animation-timing-function:ease-in; animation-delay:2s;animation-iteration-count:infinite; animation-direction:reverse;}

上面的css代碼可以簡寫為下面的格式,但是每一個屬性的順序,不能改變,否則無法生效.

div{ animation:colorchange 3s ease-in 2s infinite reverse; }

二 css3 3d轉換

除了x軸和y軸,3d轉換還引入了z軸,這使得3d操作 成為可能.

3d轉換與2d轉換非常相似.

通過rotateX(),rotateY()和rotateZ()函數以給定的度數deg圍繞相應的軸旋轉3d空間中的元素.

css代碼:

div{transform:rotateX(160deg);}

你可以使用transform:none;關閉元素的所有轉換效果.

3d轉換方法允許你使用任何css長度單位(px,em,%等)

translateX:水平移動元素.

translateY:垂直移動

translateZ:移入或移除屏幕(正值將元素移入,負值移出)

translate3d()方法允許我們按照以下的順序同時傳遞x,y和z偏移量

div{ transform:translate3d(-25px,4em,15px); }

像translate3d()方法一樣,還有scale3d()和rotate3d(),它們適用于3d中的縮放和旋轉元素.

perspective定義了如何渲染3d場景的深度.將視角看作從觀眾到物體的距離.值越大,距離越遠,視覺效果越不強烈.子元素所呈現的邊緣越小.

css代碼:

div.empty-div1{position:relative; height:200px;width:200px; margin:30px;padding:10px;border:2px solid black; perspective:100px;-webkit-perspective:100px;}

div.red-div{padding:60px;position:absolute;background-color:red; border:2px solid blue;transform:rotateX(45deg);-webkit-transform:rotateX(45deg);}

效果如下:

到此,你已經掌握了css的基礎內容.html和css的內容都算比較簡單.接下來我們將學習JavaScript,網頁的邏輯部分.

我我整理的一些CSS代碼的屬性，雖然看上去有點亂，但還是實用的

margin:合作的外邊距 padding：內邊距 auto:模塊自由居中

img:插入圖片 src:圖片的放置地址

align='absmiddle'圖片絕對居中

width:寬度 height:高度 class；屬性 float；浮動

dl：定義標簽 dd；注釋為本 #shop #shopCon；id選擇器

href；鏈接地址 font-size；文字樣式 color；文字顏色

font-weight:bold：文字加粗 span；單獨控制的內容 line-height;橫高

background:背景的屬性 display：block;塊狀顯示 text-align:center；左右居中

a:hover；按鈕背景 border-radius； w調節框架的圓角 no-repeat:平鋪圖片

list-style-type:none;取消列表簽名的原點 solid red; float:left;使豎排內容橫排顯示

font-family:"微軟雅黑"；控制文字的類型

text-decoration:none:去掉位置的下滑線 text-decoration:underline:加上下劃線

display:block;行間元素變成塊級元素 具備了高度和寬度 box-shadow：加陰影

border;1px solid;加邊框 solid:邊框線的屬性 dashed;虛線 border:none;去掉圖片的邊框線

display:inline-block:根據文字自定義寬度 margin-left:左浮動 margin:top;下浮動 float-left:左浮動 float-right:右浮動 clear:both;清除浮動

position:absolute;left:750px;bottom:px:固定定位bottom:固定定位中底部到頭部的距離；

position:fixed;right:10px;top:20%;固定定位

filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3; 透明

<embed src" ">引用音頻

歡迎大家轉載收藏，喜歡的盆友可以關注我，想要視頻教程的可以關注我后私信我，我將免費送上一套基礎的網站前端教程。

如有做的不好的歡迎大家在留言區吐槽