-
transform-rotate查看全部
-
transform-translate查看全部
-
transform以及transition查看全部
-
結(jié)構(gòu)與用法查看全部
-
第一章 1、HTML5標(biāo)簽： figure 規(guī)定獨(dú)立流內(nèi)容（圖片、代碼等） figcaption figure元素標(biāo)題 2、CSS3內(nèi)容： transform: translate ------ 平移 translate(x,y) rotate ----------- 旋轉(zhuǎn) rotate(90deg) 正值順時(shí)針 transform-origion:0 0 ; 旋轉(zhuǎn)點(diǎn)，默認(rèn)center scale ------------縮放 scale(0.5,0.5) scale(x,y) skew --------------- 斜切扭曲 skew(50deg,20deg) skew(x,y) 3、CSS3內(nèi)容： transition: property ------------- 檢索或設(shè)置對(duì)象中的參與過(guò)渡的屬性: all transform 等 duration：過(guò)渡動(dòng)畫的持續(xù)時(shí)間 timing-function:檢索或設(shè)置對(duì)象中過(guò)渡的動(dòng)畫類型（Linear，ease,ease-in,ease-out,ease-in-out） delay:檢索或設(shè)置對(duì)象中延遲過(guò)渡的時(shí)間 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" />查看全部
-
(小技巧) 如果我們想讓一個(gè)元素不可見,那么我們可以來(lái)設(shè)置透明度: 如: opacity:0; 那么此時(shí)這個(gè)元素就是不可見的了查看全部
-
注意:當(dāng)使用transform來(lái)寫動(dòng)畫的時(shí)候,如果同時(shí)需要兩個(gè)動(dòng)畫效果,那么此時(shí)只需要一個(gè)空格就可以的,不需要在重寫一個(gè)transform: 如: transform:translate(0px,0px) rotete(360deg);查看全部
-
img{opacity:0.8} 使用opacity可以用來(lái)設(shè)置透明度查看全部
-
@media screen and (min-width:1001px){figure{width:33%}} 其中的min-width:1001px表示當(dāng)寬度最小為1001px,也就是大于1001px的時(shí)候 @media screen and (min-width:601px) and (max-width:1000px){figure{width:49%}} 大于601px 小于100px 的時(shí)候 @media screen and (max-width:600px){figure{width:100%;}} 小于600px的時(shí)候查看全部
-
一定要注意:transform是和translate(),skew()等函數(shù)來(lái)使用的, h2:hover{ transition:all 2s ease-in-out; background:#F00; transform:translate(100px,100px); }查看全部
-
小技巧: 我們?cè)谑褂胻ransition的時(shí)候,由于第一個(gè)參數(shù)是我們要為那個(gè)屬性設(shè)置動(dòng)畫,如果一個(gè)一個(gè)來(lái)設(shè)置會(huì)比較麻煩,此時(shí)我們就可以使用transition:all 2s....這種方式來(lái)實(shí)現(xiàn),使用all, 那么我們?cè)诤竺嬉獮槟膫€(gè)屬性添加動(dòng)畫,直接取去寫就好了查看全部
-
代碼講解: transition:transform 2s ease-in-out; transform:translate(100px,100px); 其中transition是要為那個(gè)屬性設(shè)置動(dòng)畫,這里的對(duì)象是transform(改變的屬性),時(shí)間是2s,方式是ease-in-out,而transform的效果是translate位移,所以總結(jié)來(lái)說(shuō)就是實(shí)現(xiàn)2s中的位移的ease-in-out的動(dòng)畫效果查看全部
-
skew():如果有兩個(gè)參數(shù),只會(huì)執(zhí)行后面的一個(gè)參數(shù)的效果查看全部
-
注意: transform-origin的設(shè)置不止對(duì)rotate屬性有效果,對(duì)于其他的屬性也是有作用的查看全部
-
有的時(shí)候我們使用旋轉(zhuǎn)屬性的時(shí)候,其中我們需要去改變?cè)c(diǎn)的位置,那么此時(shí)我們就可以使用transfrom-origin屬性: 如: transform-origin:0 0;以上就是將原點(diǎn)設(shè)置在了左上角那個(gè)點(diǎn)查看全部
舉報(bào)
0/150
提交
取消