-
position 給元素定位 position:absilute絕對定位 position:relative相對定位查看全部
-
box-shadow 給元素邊框添加陰影查看全部
-
照片墻的制作步驟查看全部
-
不錯，點贊查看全部
-
挺簡單的查看全部
-
ok?查看全部
-
box-shadow 邊框添加陰影效果 position 給元素定位 z-index 設置元素上下層顯示 transform 是元素變形的屬性，配合rotate旋轉/scale改變大小 -webkit-是Chrome和Safar瀏覽器的前綴； -moz-是Firefox瀏覽器的前綴； transition設置樣式轉變所需時間查看全部
-
/*****圖片原始旋轉角度*****/ img{ padding:10px 10px 15px; background:#FFF; border:1px solid #ddd; position:absolute; top:50px; left:200px; transform:rotate(20deg); transition:all ease 1s; } /*****指向圖片變化：旋轉、放大、陰影*****/ img:hover{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); box-shadow:10px 10px 15px #CCC; }查看全部
-
太給力了 ，看完此照片墻簡短的課程，感覺好爽?。。∷。。?！查看全部
-
我喜歡 明天在自己電腦上試試查看全部
-
看了照片墻的制作課程，真是受益匪淺，前幾天剛剛做過一個照片墻，但是對原理理解的不太清楚，今天無意間發現本課程，徹底的知道了用的是什么技術，主要的實現方法，慕課網真的太給力了。知道了body要給一背景色；實現照片墻的效果要用到transform的rotate方法，position要用到絕對位置absolute；還要注意瀏覽器的兼容性。查看全部
-
transform：功能：使元素變形的屬性，配合rotate(旋轉)、scale(縮放倍數)、skew（扭曲元素）等使用. box-shadow:給元素的邊框添加陰影效果 positon:給元素定位，主要用到絕對定位 z-index:設置元素的上下層顯示 transition:設置元素由樣式1轉為2的過程所需的時間 ------------------------------------------------------- 為了瀏覽器兼容：-webkit-transform -moz-transform transform <style> body{background-color:#eee}//設置背景色 h1{text-align:center}//標題居中 .continer{whdth:900px; height:450px; margin:60px auto}//居中設置寬高為后續絕對定位 img{ padding:10px上 10px右 15px下; //填充：順時針 background:#fff;背景色 border:1px solid #ddd; //邊框 position:absolute;//絕對定位 transform:rotate(20deg)傾斜20°//樣式一傾斜角度 transition:2s;//樣式1-->>樣式2顯示時間 z-index:1; } img:hover{ transform:rotate(0deg)//旋轉角度為0; transform:scale(2)//鼠標移動上后圖片縮放為原來的2倍 box-shadow:10px 10px 15px #//陰影:（左正右負)（上負下正）(陰影距離) (陰影色) z-index:2; } .pic1{ left:400px; top:0px; transform:roate(20deg); } </style> <img class=".pic1" src="1.jpg"/>查看全部
-
-webkit-是Chrome和Safar瀏覽器的前綴； -moz-是Firefox瀏覽器的前綴；查看全部
-
transform:rotate(20deg) scale(1.5) translate(-100px,-10px); transition:設置元素由樣式1轉變為樣式2的過程查看全部
-
各種屬性查看全部
舉報
0/150
提交
取消