技術之路

站在代碼以外看技術

只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果

所以有人想要的是經由過程列出的步交運動爲本身,然後分享。正如添加後果的鏈接或按鈕的時光仿徨,它是在你想給的器械後果即便在圖象上懸停時的時光能夠應用後果的樣本。因為大批應用CSS3不支撐壹切的閱讀器,這二者只應用CSS來完成,被縮放滑塊黑色和白色隱約閃光燈,有15種。

罕見的HTML CSS·

樣品曾經應用HTML,以下面的代碼,還劃定了以下內容作爲CSS配合作風。 因為還存在指定CSS的寬度和高度的一部門,請調劑至合適他們到本身的情況中時,它僅作參考。

HTML

<figure>
	<img src="image.jpg" />
</figure>

CSS

figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}

另外,由於它應用的每壹個動畫GIF引入活動,現實挪動和顯示可以鄙人面的演示頁面發明。

只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果

1.縮小#1

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
那些在懸停時的圖象落實了擴展以下CSS,實行描寫。 當你想轉變倍率scale的值,當你想轉變,如速度transition,請分離轉變任何器械的價值。

CSS

figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

現實活動可以鄙人面找到。

2.縮小#2

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
異樣的工作,好比圖象被縮小在懸停的時光,但這裏imgwidth轉變來轉變圖象巨細,你可以用的感到,不像晚期的表示。 該CSS是一個完成描寫以下。

CSS

figure img {
	width: 300px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	width: 350px;
}

現實活動可以鄙人面找到。

3.減少#1

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
1.縮小#1中的圖象的後果在引見懸停時的反向版本”睜開,就在懸停的時刻scale,但我們經由過程在初始狀況時增長值增長的價值,在這裏提早,在懸停時經由過程下降值的圖象是要減少的後果的完成。 該CSS是一個完成描寫以下。

CSS

figure img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

現實活動可以鄙人面找到。

4.減少#2

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
這是“ 2縮小#2中的影響而產生反向版原來縮小在引入時的圖象懸停在”,以下所述CSS的實行停止解釋。

CSS

figure img {
	width: 400px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	width: 300px;
}

現實活動可以鄙人面找到。

5.滑動

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》

事前margin應被放置在應用的圖象的地位略微移位,即在懸停的時光margin是甚麽經由過程擦除標誌的影響,如滑動幻燈片圖象。 該CSS是一個完成描寫以下。

※只需所應用的圖象的寬度是比“要面積+幻燈片要被顯示的間隔”時,scale你的指定不須要。

CSS

figure img {
	margin-left: 30px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	margin-left: 0;
}

現實活動可以鄙人面找到。

6.扭轉(+減少)

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
在懸停的時刻那些圖片給扭轉的後果,進一步“ 3.減少#1是個甚麽抽象也彌補說,在懸停的引見的時刻減少效應”。 描寫以下CSS于扭轉角度履行rotate一個,縮小倍率scale可以經由過程轉變每壹個的值被轉變爲任何挪動。

CSS

figure img {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

現實活動可以鄙人面找到。

7.隱約

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
filter這是一個隱約後果的圖象應用,但將是器械,此時的樣品釋放那些隱約預處置後果,在其時仿徨的,也apparent’re與隱約後果時,懸停在反向I. CSS是,假如你想調劑鄙人面的示例源隱約後果:完成描寫以下blur(3px),請更改已被指定爲對壹切這些的價值點。

CSS

figure img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}

現實活動可以鄙人面找到。

8.灰階

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
同時filter應用,這裏是圖象的灰度轉換。 該CSS是一個完成描寫以下。

CSS

figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

現實活動可以鄙人面找到。

9.棕褐色

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
這裏還filter應用了該類型的,它是由圖象轉換爲深褐色彩取得。 該CSS是一個完成描寫以下。

CSS

figure img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

現實活動可以鄙人面找到。

10.隱約+灰度

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
據下面引見filter它,但你也能夠應用多個後果的組合。 這是“ 7隱約 ”和“ 8灰度其在組合試圖與”,履行被描寫以下的CSS。

CSS

figure img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

現實活動可以鄙人面找到。

11.不通明度#1

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
這也是常常看到的實行,在懸停的時刻opacity是用傳輸的工作。 該CSS是一個完成描寫以下。

CSS

figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	opacity: .5;
}

現實活動可以鄙人面找到。

12.不通明度#2

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
在統壹個懸停和更早opacity的是,應用傳輸的工作,但圖象的父元素(在此示例中figure只對配景色彩的名字),你也能夠略微分歧的方法來顯示。 該CSS是一個完成描寫以下。

CSS

figure {
	background: #1abc9c;
}
figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	opacity: .5;
}

現實活動可以鄙人面找到。

13.閃耀

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
也是用這個博客是,它是在懸停的時刻甚麽樣的抽象給了像閃耀了一下一個後果。 該CSS是一個完成描寫以下。

CSS

figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

現實活動可以鄙人面找到。

14.辦事

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
這是更智能和通用的高描寫辦法有能夠的,然則這基蘭和光獲得的後果,如從懸停的時光從左向右活動。 該CSS是一個完成描寫以下。

CSS

figure {
	position: relative;
}
figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

現實活動可以鄙人面找到。

15.圈

《只用CSS,圖象可以完成和兼容性看起來不錯的15種懸停後果》
是甚麽給了連鎖反響,如谷歌的材質設計,在應用的時刻仿徨。 該CSS是一個完成描寫以下。

CSS

figure {
	position: relative;
}
figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

現實活動可以鄙人面找到。

以上,這是抽象與優越的兼容能夠將仿徨,只能在CSS完成的後果。 固然,依據響應的閱讀器,但因為這類方法只能隨意馬虎多種假如閱讀器沒有成績,若何顯示CSS,甚麽頁面,如圖象一字排開許多,如照片庫頁我以為,當你想用它的後果長短常有效的。 別的,我在之前這個博客中寫道“ 題目後果20只完成在CSS中還建議在組合應用”,在這裏也由於它只能在CSS可以很輕易地完成,就看也在這裏,假如你有興致請測驗考試探測。

這裏除它在壹切的方法引入,假如有,可以在CSS完成也請告知我一個風趣的後果:)

本文轉載自nxworld,僅作技術分享。點擊瀏覽原文

點贊

揭櫫評論

電子郵件地址不會被公開。 必填項已用*標注