-
transform-rotate查看全部
-
transform-translate查看全部
-
transform以及transition查看全部
-
結構與用法查看全部
-
第一章 1、HTML5標簽： figure 規定獨立流內容（圖片、代碼等） figcaption figure元素標題 2、CSS3內容： transform: translate ------ 平移 translate(x,y) rotate ----------- 旋轉 rotate(90deg) 正值順時針 transform-origion:0 0 ; 旋轉點，默認center scale ------------縮放 scale(0.5,0.5) scale(x,y) skew --------------- 斜切扭曲 skew(50deg,20deg) skew(x,y) 3、CSS3內容： transition: property ------------- 檢索或設置對象中的參與過渡的屬性: all transform 等 duration：過渡動畫的持續時間 timing-function:檢索或設置對象中過渡的動畫類型（Linear，ease,ease-in,ease-out,ease-in-out） delay:檢索或設置對象中延遲過渡的時間 4、媒體查詢： @media screen and (width:800px){....} @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" />查看全部
-
(小技巧) 如果我們想讓一個元素不可見,那么我們可以來設置透明度: 如: opacity:0; 那么此時這個元素就是不可見的了查看全部
-
注意:當使用transform來寫動畫的時候,如果同時需要兩個動畫效果,那么此時只需要一個空格就可以的,不需要在重寫一個transform: 如: transform:translate(0px,0px) rotete(360deg);查看全部
-
img{opacity:0.8} 使用opacity可以用來設置透明度查看全部
-
@media screen and (min-width:1001px){figure{width:33%}} 其中的min-width:1001px表示當寬度最小為1001px,也就是大于1001px的時候 @media screen and (min-width:601px) and (max-width:1000px){figure{width:49%}} 大于601px 小于100px 的時候 @media screen and (max-width:600px){figure{width:100%;}} 小于600px的時候查看全部
-
一定要注意:transform是和translate(),skew()等函數來使用的, h2:hover{ transition:all 2s ease-in-out; background:#F00; transform:translate(100px,100px); }查看全部
-
小技巧: 我們在使用transition的時候,由于第一個參數是我們要為那個屬性設置動畫,如果一個一個來設置會比較麻煩,此時我們就可以使用transition:all 2s....這種方式來實現,使用all, 那么我們在后面要為哪個屬性添加動畫,直接取去寫就好了查看全部
-
代碼講解: transition:transform 2s ease-in-out; transform:translate(100px,100px); 其中transition是要為那個屬性設置動畫,這里的對象是transform(改變的屬性),時間是2s,方式是ease-in-out,而transform的效果是translate位移,所以總結來說就是實現2s中的位移的ease-in-out的動畫效果查看全部
-
skew():如果有兩個參數,只會執行后面的一個參數的效果查看全部
-
注意: transform-origin的設置不止對rotate屬性有效果,對于其他的屬性也是有作用的查看全部
-
有的時候我們使用旋轉屬性的時候,其中我們需要去改變原點的位置,那么此時我們就可以使用transfrom-origin屬性: 如: transform-origin:0 0;以上就是將原點設置在了左上角那個點查看全部
舉報
0/150
提交
取消