-
css3原來還有這些功能查看全部
-
transition:all 2s 表示所有的屬性都將參與動畫查看全部
-
Html5語義化標簽 figure標簽 用于規定獨立的流內容(圖像、圖表、照片、代碼等) figcaption標簽 與figure配套使用,用于標簽定義figure元素的標題 例: <figure> <img alt="" src=""> <figcaption></figcaption> </figure> CSS3屬性 transform以及transition transform為css3屬性,主要用于元素的變形處理 屬性:translate(平移),rotate(旋轉),scale(縮放),skew(斜切)查看全部
-
transform的四種基本屬性:平移,旋轉,扭曲,縮放查看全部
-
transform:translate 是相對于當前自己的位置定位的查看全部
-
p:nth_of_type(1){transition-delay:0.05s} p:nth_of_type(2){transition-delay:0.05s} p 標簽同級的兄弟元素查看全部
-
figure:figcaption{h5新增標簽:規定獨立內容提高圖片識別效率,配套使用查看全部
-
父容器中有相對定位時,子容器中的絕對定位就根據父容器查看全部
-
@media screen and (min-width: 1001px){ figure{width: 33.3%;} } @media screen and (max-width: 600px){ figure{width:100%;} } @media screen and (min-width:600px) and (max-width: 1000px){ figure{width:50%;} }查看全部
-
opacity:0.8; 透明度 <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> 當屏幕的寬度大于等于400px的時候,應用styleA.css 在media屬性里: screen 是媒體類型里的一種,CSS2.1定義了10種媒體類型 and 被稱為關鍵字,其他關鍵字還包括 not(排除某種設備),only(限定某種設備) <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> 當屏幕的寬度大于600小于800時,應用styleB.css @media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時,應用下面的CSS樣式*/ .class {background: #ccc; } } -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */查看全部
-
媒體查詢可以備用在css中的@media 和@import 規則上 @media sreen and (width:800px){ 樣式 } @import url(example.css) screen and (width:800px) <link media="screen and (width:800px)" rel="stylesheet" href="example.css" />0查看全部
-
transform:all 2s ease-in 1s; transform:translate(xpx,ypx)平移//all所有指定元素 2s 過渡動畫時間 ease-in/ease out 慢速開始,然后變快 /慢速結束的過渡效果 1s 推遲多久才執行 transform:width 2s ease-in 1s; //指定寬度查看全部
-
transition過度動畫處理 ie6-9 不支持 property:檢索或設定對象中的參與過渡的屬性 duration 過渡動畫時間 delay 檢索或設置對象延遲過渡的時間 timing-function 檢索或設置對象中過渡的動畫類型(linear ease ease-in ease-out ease-in-out)查看全部
-
translate 指定對象的2dtranslation 第一個x軸 第二個y軸 第二個參數未提供則默認0 例如 transform:translate(10px,10px); 平移 rotate 旋轉 需要選有transform-origin屬性的定義 (設定元素的中心點) rotate(90deg) ,transform-origin:0 0; scale 縮放 transform:scale(1.3,1.3);/*縮放 無單位*/ skew 斜切 transform:skew(10deg,2deg);/*斜切 單位deg*/ transform-origin:0 0; /*旋轉中心點 定義 00 左上角*/ transform:rotate(0deg); /*旋轉*/ transform:translate(10px,100px;); /*平移*/ transform:scale(1.3,1.3);/*縮放 無單位*/ transition: transform 3s;查看全部
-
transform transition transform css3屬性 主要用于元素變形處理 屬性:translate 平移 rotate 旋轉 scale 縮放 skew 斜切 兼容性 ie6-8 不兼容查看全部
舉報
0/150
提交
取消