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