-
css3絢麗照片墻 1旋轉(zhuǎn) 2縮放 3陰影 4動畫查看全部
-
transform:rotate(30deg); 順時針旋轉(zhuǎn)30° transform:scale(1.2); 放大1.2倍 transition:1s; 動畫從樣式1到樣式2的時間 box-shadow: 10px 11px 12px 13px #ccc; 盒子陰影 -webkit- 谷歌內(nèi)核 -moz- 火狐內(nèi)核查看全部
-
關(guān)鍵技術(shù)點： 1、box-shadow:陰影 功能：給元素的邊框添加陰影的效果 語法：box-shadow:X軸偏移量 Y軸偏移量 [陰影模糊半徑][陰影擴展半徑][陰影顏色][投影方式] 2、position:給元素定位 功能：給元素定位，主要用到絕對定位 用法：position:absolute與posistion:relative 配合使用實現(xiàn)相對于包含元素(參照元素)定位 3、z-index:設(shè)置元素上下層顯示順序 功能：設(shè)置元素的上下層顯示順序 語法：Z-index：整數(shù) 注意：擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 功能：是元素變形的屬性，其【配合rotate(旋轉(zhuǎn)角度),scale（縮放倍數(shù)）,skew(扭曲元素)等參數(shù)一起 使用 語法：transform:rotate(旋轉(zhuǎn)角度) transform:scale(縮放倍數(shù)) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過程所需時間。 語法：transition:durantion 注意：這只是transition其中的一種用法查看全部
-
transform:scale(縮放倍數(shù))查看全部
-
box-shadow查看全部
-
.mainDiv:hover{ background:#fff; font-color:#000; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); -webkit-transition:1s; -moz-transition:1s; transition:1s; }查看全部
-
照片墻基本制作步驟查看全部
-
文字一開始設(shè)備和背景色一樣，鼠標(biāo)移動到 div 才將文字顏色改變能達(dá)到文字由隱藏到顯示的效果。rotate 和 scale 屬性可以在 transform 一次性同時設(shè)置的,要是分開寫的話，后面的會把前面的屬性覆蓋的查看全部
-
要點小結(jié)：<br> 1.照片墻的樣式僅初始位置和初始角度不同，處理方式是給每個img一個class類名，單獨設(shè)置不同樣式，相同樣式寫在img和img:hover（鼠標(biāo)移上去的效果）里<br><br> 2.樣式宜采用外部鏈接方式<link rel="stylesheet" href="css/base.css(當(dāng)css文件夾與html處于同一層級時這樣寫)" /><br><br> 3.rotate（Xdeg），順時針X為+，逆時針X為-<br><br> 4.transform和transtion都需要注意瀏覽器兼容性：-webkit-、-moz-<br><br> 5.transtion不止控制鼠標(biāo)移上去這一個動畫，而是控制所有動畫的，所以transtion要加在要變化的元素的基本樣式上 6.z-index屬性設(shè)置照片上下層疊放，其中img:hover里的z-index值要比img中大<br><br> 7.box-shadow陰影效果放在img:hover中<br><br> 8.給img添加一個盒子將其設(shè)置為相對定位，img設(shè)置為絕對定位查看全部
-
關(guān)鍵技術(shù)點： 1、box-shadow:陰影 功能：給元素的邊框添加陰影的效果 語法：box-shadow:X軸偏移量 Y軸偏移量 [陰影模糊半徑][陰影擴展半徑][陰影顏色][投影方式] 2、position:給元素定位 功能：給元素定位，主要用到絕對定位 用法：position:absolute與posistion:relative 配合使用實現(xiàn)相對于包含元素(參照元素)定位 3、z-index:設(shè)置元素上下層顯示順序 功能：設(shè)置元素的上下層顯示順序 語法：Z-index：整數(shù) 注意：擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面 4、transform:元素變形。rotate(旋轉(zhuǎn)角度)scale(縮放倍數(shù))skew(扭曲元素) 功能：是元素變形的屬性，其【配合rotate(旋轉(zhuǎn)角度),scale（縮放倍數(shù)）,skew(扭曲元素)等參數(shù)一起 使用 語法：transform:rotate(旋轉(zhuǎn)角度) transform:scale(縮放倍數(shù)) 5、transition設(shè)置元素由樣式1轉(zhuǎn)變成樣式2的過程所需時間。 語法：transition:durantion 注意：這只是transition其中的一種用法查看全部
-
步驟分解： 每張照片的位置不一樣 每張照片有一定的旋轉(zhuǎn)角度 照片陰影及緩慢旋轉(zhuǎn)、緩慢放大的特效制作查看全部
-
transform:rotate(30deg); 順時針旋轉(zhuǎn)30° transform:scale(1.2); 放大1.2倍 transition:1s; 動畫從樣式1到樣式2的時間 box-shadow: 10px 11px 12px 13px #ccc; 盒子陰影 -webkit- 谷歌內(nèi)核 -moz- 火狐內(nèi)核查看全部
-
變化過程查看全部
-
這個是重點查看全部
-
box-shadow查看全部
舉報
0/150
提交
取消