Home » CSS3 應用

[CSS3]用 CSS3 做效果 - 影像縮放位移突顯效果

[ 日期： | 瀏覽：22,172 | 迴響：搶沙發 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 1,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

有網友在影像縮放位移突顯效果中留言說該效果不用程式也能做出來。是的~在 CSS3 的 transition 及 transform 的加持下，像這樣的效果都能不靠程式就實做出來了。

因為沒有使用程式來產生超連結，所以 HTML 得調整一下元素內容：

檢視原始碼 HTML
1
2
3
4
5
6

<body>
	<div class="abgne-frame-20140107-1">
		<img src="img/2012TaipeiCartShow_01.jpg" title="" width="250" height="164" />
		<a class="overlay" href="http://abgne.tw"></a>
	</div>
</body>

.overlay 是用來當遮罩用的，加上本身是超連結，所以直接點擊也能連到相對應的網頁。接著加上基本的 CSS：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.abgne-frame-20140107-1 {
	position: relative;
	overflow: hidden;
	width: 250px;
	height: 164px;
}
.abgne-frame-20140107-1 .overlay {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.5;
}

目前只能看到有黑遮罩的圖片：
css3-effect-image-resize-shift-highlight-0

接著我們需要在滑鼠移入到 .abgne-frame-20140107-1 上時控制 img 及 .overlay 做效果改變：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11

.abgne-frame-20140107-1:hover img {
	width: 275px;
	height: 180px;
	-webkit-transform: translate(-12.5px, -8px);
	-moz-transform: translate(-12.5px, -8px);
	-o-transform: translate(-12.5px, -8px);
	transform: translate(-12.5px, -8px);
}
.abgne-frame-20140107-1:hover .overlay {
	opacity: 0;
}

除了同時變更 img 的寬高之外，筆者還使用 tranlate(x, y) 將元素的位置進行移動。
css3-effect-image-resize-shift-highlight-1

最後一樣是指定 transition 來加上補間動畫的過程：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.abgne-frame-20140107-1 .overlay {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.5;
	-webkit-transition: opacity 0.4s linear;
	-moz-transition: opacity 0.4s linear;
	-o-transition: opacity 0.4s linear;
	transition: opacity 0.4s linear;
}
.abgne-frame-20140107-1 img {
	-webkit-transition: width 0.4s linear, height 0.4s linear, -webkit-transform 0.4s linear;
	-moz-transition: width 0.4s linear, height 0.4s linear, -moz-transform 0.4s linear;
	-o-transition: width 0.4s linear, height 0.4s linear, -o-transform 0.4s linear;
	transition: width 0.4s linear, height 0.4s linear, transform 0.4s linear;
}

transition 在設定時也能一次指定多種屬性的補間動畫效果，只要每組屬性間使用逗號(comma)區隔就可以了。
css3-effect-image-resize-shift-highlight-2

如果覺得一一指定太繁瑣的話，那也可以直接寫 all 來代表全部屬性的值改變時都要進行補間動畫效果：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.abgne-frame-20140107-1 .overlay {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.5;
	-webkit-transition: opacity 0.4s linear;
	-moz-transition: opacity 0.4s linear;
	-o-transition: opacity 0.4s linear;
	transition: opacity 0.4s linear;
}
.abgne-frame-20140107-1 img {
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all  0.4s linear;
	transition: all  0.4s linear;
}

當然能放大也能縮小囉，或者是放大時加個旋轉的效果。唉呀~直接動手試吧~

See the Pen [CSS3]用 CSS3 做效果 - 影像縮放位移突顯效果 by abgne.tw (@abgne-tw) on CodePen

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響