CSS3照片墻是一種非常流行的網頁布局方式,它可以將圖片以隨機的方式排列在頁面上,形成美觀的照片墻效果。
要實現照片墻的位置隨機,我們需要使用CSS3提供的新特性,即flexbox布局和transform屬性。
.photo-wall { display: flex; flex-wrap: wrap; justify-content: center; } .photo-wall img { width: 250px; height: 250px; margin: 5px; transition: transform 0.5s ease; } .photo-wall img:hover { transform: scale(1.2); } @media (max-width: 768px) { .photo-wall img { width: 150px; height: 150px; } }
上面的代碼中,我們使用了flexbox布局來實現圖片的自適應排列,通過設置flex-wrap為wrap和justify-content為center,可以讓圖片在頁面中自動排列,并且隨機出現在不同的位置。
在圖片hover的時候,我們使用了transform屬性來實現一個縮放動畫效果,讓用戶更加直觀地感受到圖片的特別之處。
最后,我們使用了@media查詢來使照片墻在不同的設備上都能夠正常展示,這樣用戶就可以在不同的設備上欣賞到同樣美麗的照片墻。