純CSS3實現圖片牆，css3實現圖片
預備知識
值得一提的:更多屬性的參數要查詢css手冊,這裡展示只是會用到的;
素材擷取百度自行搜尋圖片素材,替換下面代碼的圖片路徑即可..
例子中的圖片大於400像素小於600像素,其中480X270居多
初始化淩亂的圖片排序(CSS控制),滑鼠懸浮會讓圖片處於頂層顯示,且圖片恢複水平展示+放大1.5倍
代碼實現代碼內含注釋
index.html
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>CSS3實現照片牆</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>純CSS3實現照片牆</h1> <div id="container"> <img class="position_pic1" src="img/1.jpg" alt="這是一個美眉的圖片"> <img class="position_pic2" src="img/2.jpg" alt="這是一個美眉的圖片"> <img class="position_pic3" src="img/3.jpg" alt="這是一個美眉的圖片"> <img class="position_pic4" src="img/4.jpg" alt="這是一個美眉的圖片"> <img class="position_pic5" src="img/5.jpg" alt="這是一個美眉的圖片"> <img class="position_pic6" src="img/6.jpg" alt="這是一個美眉的圖片"> <img class="position_pic7" src="img/7.jpg" alt="這是一個美眉的圖片"> <img class="position_pic8" src="img/8.jpg" alt="這是一個美眉的圖片"> </div></body></html>style.css
*{ margin: 0; padding: 0; border: 0; outline: 0;}/*簡易版reset*/h1{ text-align: center;}/*文字置中*/#container{ position: relative; width: 1200px; margin: 0 auto;}/*塊置中*/#container img{ position: absolute; z-index: 1; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: all; transition-property: all; border: 5px solid #eee; box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);}/* 給圖片添加一個小陰影(外陰影)及增加邊框 這裡的transition分開參數來寫,方便小夥伴們理解.當然也可以用簡寫方式: eg: tansition:all 0.5 ease-out position在這裡的作用是為了位移圖片位置的,,後面可以看到為何 z-index是為了圖片堆疊的排放,,這裡為1,hover那裡為2(效果即為底層圖片第一張顯示) */#container img:hover{ z-index: 200; -webkit-transform: rotate(0deg); -webkit-transform: scale(1.5); -ms-transform: rotate(0deg); -ms-transform: scale(1.5); transform: rotate(0deg); transform: scale(1.5); border: 5px solid #eee; box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);}/* 這一塊是讓圖片在hvoer下的圖形變換,水平展示及放大1.5倍; transform也可以簡寫的: eg: transform:rotate(90deg) scale(1); *//*下面這些子類都是來定位元影像片初始位置及旋轉角度的*/.position_pic1{ top: 100px; left: 5px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg);}.position_pic2{ top: 200px; left: 600px; -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg);}.position_pic3{ top: 20px; left: 400px; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg);}.position_pic4{ top: 400px; left: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}.position_pic5{ top: 400px; left: 500px; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}.position_pic6{ top: 500px; right: 50px; -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg);}.position_pic7{ top: 600px; left: 250px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg);}.position_pic8{ top: 200px; right: 600px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg);}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
