歡看電影的朋友肯定會注意到一個有趣的細(xì)節(jié)，就是電影出品方一定會在片頭的Logo環(huán)節(jié)做一個小特效：暗影流動之間光澤一閃而過，這樣做不僅可以提高Logo的辨識度，還可以提升質(zhì)感，一舉兩得。參照華納兄弟影業(yè)(Warner Bros. Pictures)的例子：

那么，在前端領(lǐng)域，如果使用純CSS技術(shù)，能不能實現(xiàn)類似的特效呢？答案當(dāng)然是可以的，這次我們以本站的Logo為例子，以一持萬、提綱挈領(lǐng)地講解一下如何使用純CSS技術(shù)實現(xiàn)圖片Logo鼠標(biāo)懸停光澤一閃而過的光影特效。

一般情況下，大多數(shù)前端開發(fā)會選擇 linear-gradient() ，這個方法創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于<gradient>數(shù)據(jù)類型，是一種特別的<image>數(shù)據(jù)類型。

簡單用法：

/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);

/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);

/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);

那么它怎么和logo圖片結(jié)合使用呢？首先創(chuàng)建一個對象，因為是logo，所以我使用a標(biāo)簽，也就是超級鏈接，隨后聲明偽類mylogo：

<a href="/" class="mylogo" title="劉悅的技術(shù)博客"></a>

之后，定義logo的樣式：

.mylogo{	
		display:block;
		margin: 0 auto;
    width:255px;
    height:200px;
    background-image:/logo.png;
    background-repeat: no-repeat;
}

接著就是linear-gradient()出場，原理并不復(fù)雜，利用linear-gradient繪制一個白色半透明漸變層，利用背景的負(fù)坐標(biāo)隱藏起來，同時配合transition屬性，在鼠標(biāo)懸停(hover)的時候，設(shè)置1秒鐘的延時動畫，逐漸將光斑的坐標(biāo)進(jìn)行位移，產(chǎn)生一種光澤掠過的效果：

.mylogo{
            width: 255px;
            height: 200px;
 
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
            transition: 1s ease;
        }

.mylogo:hover {

	background-position: 200px 0, 0 0;
}

這里需要注意的是，默認(rèn)負(fù)坐標(biāo)一定要超過logo本體的寬度，否則位移就不夠充分，效果是下面這樣的:

看起來還不錯，這里transition的屬性設(shè)置在logo本體的偽類上面，此時如果logo本體失去鼠標(biāo)的焦點(diǎn)，光斑位置又會回到原來的負(fù)坐標(biāo)，此時光影又會在回閃一次，也就是一次懸停發(fā)生兩次位移，閃爍兩次，如果只想閃一次，可以將transition加載hover偽類中，這樣離開后不會二次位移，因為動畫效果只會出現(xiàn)在鼠標(biāo)懸停上，鼠標(biāo)離開后，就沒有動畫回閃了：

.mylogo{
            width: 255px;
            height: 200px;
            /*直接使用background縮放版本*/
            /*每個漸變點(diǎn)的位置不能太小，不然會出現(xiàn)殘缺光斑*/
            /*no-repeat -270px 0：將光斑定位隱藏起來*/
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
           /* transition: 1s ease;  */
        }

.mylogo:hover{
	/*鼠標(biāo)滑過實現(xiàn)光斑滑動，但是在多背景情況下，需要多個background-position屬性值，否則會影響其他背景*/
	background-position: 200px 0, 0 0;
	transition: 1s ease;
}

效果是這樣的：

但是這就結(jié)束了嗎？還沒有，因為這看起來似乎。。。有點(diǎn)一律千篇？

如果所有人都用linear-gradient，就難免有點(diǎn)無趣了，那么有沒有別的不落窠臼的玩兒法呢？

既然曉得了原理，無非就是位移產(chǎn)生的小把戲，那么我們完全脫離linear-gradient，使用一張帶光澤質(zhì)感的背景圖片shine.png：

由于使用了背景圖，所以我們需要對代碼進(jìn)行修改，為實體的背景圖添加一個容器，span標(biāo)簽：

<a href="/" class="mylogo" title="劉悅的技術(shù)博客"><span></span></a>

樣式和linear-gradient差不多，也是利用負(fù)坐標(biāo)將span標(biāo)簽內(nèi)的背景圖隱藏起來：

.mylogo span {
	display: block;
	background: url("/shine.png") -360px -380px no-repeat;	

	transition-property: all;
	transition-duration: .7s;

	height: 200px;
	width: 255px;
}

接下來要比linear-gradient要簡單地多，直接設(shè)置懸停屬性，讓背景圖片發(fā)生位移：

.mylogo:hover span {
	background-position: 100px 300px;
}

效果是這樣的：

如果仔細(xì)觀察，會發(fā)現(xiàn)背景圖更加契合光影掠過的效果，因為linear-gradient每個漸變點(diǎn)在不同分辨率的屏幕下并不統(tǒng)一，也就是說在高分辨下會出現(xiàn)殘缺光斑。

暗黑模式下的效果是這樣的：

看起來似乎更加有質(zhì)感一點(diǎn)，除此之外，也許你還想利用transition玩一些更加刺激的效果：

.mylogo:hover {
            -webkit-transform: rotate(666turn);
			transform: rotate(666turn);
			transition-delay: 1s;
			transition-property: all;
			transition-duration: 59s;
			transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}

讓我們旋轉(zhuǎn)、跳躍、閉著眼：

結(jié)語：兩套方案都可以很好的實現(xiàn)光影特效，區(qū)別在于linear-gradient并不會消耗網(wǎng)站的帶寬，但會消耗電腦的CPU和內(nèi)存，而與背景漸變相比，背景圖像效果會更好一點(diǎn)，但是將會更多地使用網(wǎng)絡(luò)帶寬，而webp技術(shù)又可以幫助我們對圖片進(jìn)行極致的壓縮(參見：https://v3u.cn/a_id_190)，所以我們可以理解這是一種權(quán)衡，畢竟，書本上寫的是道理，但是現(xiàn)實中講究的是取舍，不是嗎?