整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，這篇文章給大家分享怎么樣設計一個簡單的圖片列表縮放特效頁面
話不多說，直接看效果圖：
簡單圖片列表縮放特效
html代碼：
<div class="tpt-img"> <img class="a" src="http://www.jungjaehyung.com/uploadfile/2024/0807/20240807025546826.png"> <div class="b a"> <div class="c"></div> <div class="d"> 簡單圖片列表縮放特效 </div> </div> </div>
知識點：
css:hover選擇器是在鼠標移動到對應標簽上的特殊樣式，它可以用于所有元素。
css3 transform屬性應用于元素的2D或3D轉換，如旋轉、縮放、移動、傾斜等。
css3 transition屬性是在一定的時間范圍內平滑地過渡效果，參數為時間，單位為s（秒）或者ms（毫秒）。
注意，以上的css3特效屬性都要考慮瀏覽器的兼容性，如：
div {
transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2); /* Safari 和 Chrome */
-moz-transform: scale(1.2,1.2); /* Firefox */
-ms-transform: scale(1.2,1.2) /* IE 9 */
-o-transform: scale(1.2,1.2); /* Opera */
}
CSS代碼：
.tpt-img {
position: relative;
overflow: hidden;
margin: 10px;
width: 350px;
height: 250px
}
.tpt-img img {
z-index: 0;
float: left;
height: 100%;
width: 100%
}
.tpt-img:hover img {
opacity: 0.8;
transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2)
}
.tpt-img .a {
transition: all .40s ease-in-out;
-webkit-transition: all .40s ease-in-out;
-moz-transition: all .40s ease-in-out;
-ms-transition: all .40s ease-in-out;
-o-transition: all .40s ease-in-out
}
.tpt-img .b {
opacity: 0;
cursor: pointer;
position: absolute;
top: 250px;
height: 100%;
width: 100%;
}
.tpt-img:hover .b {
opacity: 1;
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px)
}
.tpt-img .c {
z-index: 1;
background: #8ec1cd;
position: absolute;
height: 100%;
width: 100%
}
.tpt-img .d {
z-index: 2;
color: #fff;
position: absolute;
line-height: 50px;
text-align: center;
height: 100%;
width: 100%
}
這樣一個簡單的圖片列表縮放特效就完成了，當然，布局的方式有很多種，這只是其中一個方法，也歡迎大家留言分享一下其他的布局方式，謝謝觀看！！！
這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。
這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.container::before {
content: "";
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5; /* 調整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內容
</div>
</div>
</body>
</html>這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
filter: opacity(0.5); /* 調整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內容
</div>
</body>
</html>以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。
在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。
例
設置圖像的底部邊緣，在元素的底邊上面5px：
img
{
position:absolute;
bottom:5px;
}
屬性定義及使用說明
對于絕對定位元素，bottom屬性設置單位高于/低于包含它的元素的底邊。
對于相對定位元素，bottom屬性設置單位高于/低于其正常位置的元素的底邊。
注意：如果"position：static"，底部的屬性沒有任何效果。
說明： 對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。 對于相對定義元素，如果 bottom 和 top 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。
| 默認值： | auto |
|---|---|
| 繼承性： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.bottom="50px" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| bottom | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認值。通過瀏覽器計算底部的位置。 |
| % | 設置以包含元素的百分比計的底邊位置。可使用負值。 |
| length | 使用 px、cm 等單位設置元素的底邊位置。可使用負值。 |
| inherit | 規定應該從父元素繼承 bottom 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
