只需要兩個(gè)html元素和一個(gè)css變換，我就能創(chuàng)造出我自己的閃光效果。讓我們來(lái)實(shí)現(xiàn)它！

呈現(xiàn)光澤圖片

下面就是這張addy在他博客上使用的圖片：

比我需要的要大一些，但你可以把它裁剪一些。

注意：左邊的那張是純白色的，所以看不到，兩張圖在css代碼中都要用到。

html代碼

制作這種閃光效果，需要有兩個(gè)元素：一個(gè)外框架，另一個(gè)內(nèi)部元素用來(lái)呈現(xiàn)光澤。我這里使用了a標(biāo)簽和span標(biāo)簽：

復(fù)制代碼代碼如下:

html代碼總是最簡(jiǎn)單的。

css代碼

a元素的樣式很簡(jiǎn)單，溢出的部分要隱藏，保證光澤的正常顯示，最后設(shè)置元素的長(zhǎng)寬：

復(fù)制代碼代碼如下:

a.logo {

display: block;

background: url("logo.png") 0 0 no-repeat;

height: 70px;

width: 91px;

overflow: hidden;

}

負(fù)責(zé)光澤的span元素也十分簡(jiǎn)單；設(shè)置它的長(zhǎng)寬和背景位置就行了：

復(fù)制代碼代碼如下:

a.logo span {

display: block;

background: url("shine.png") -60px -80px no-repeat;

transition-property: all;

transition-duration: .8s;

height: 70px;

width: 91px;

}

最后一步是設(shè)置鼠標(biāo)懸停時(shí)的動(dòng)作：

復(fù)制代碼代碼如下:

a.logo:hover span {

background-position: 100px 100px;

}

因?yàn)槟槻渴腔【€(xiàn)形，這里做了一些特殊處理，我用border-radius將內(nèi)部的span變成了橢圓形：

復(fù)制代碼代碼如下:

a.logo span {

border-radius: 50%;

}

這就是當(dāng)鼠標(biāo)懸停時(shí)光澤一閃而過(guò)的效果了，非常簡(jiǎn)單！

用這樣少的代碼創(chuàng)造出這么炫的效果，完全值得放在網(wǎng)站上。很多年前我們都需要使用javascript工具庫(kù)才能完成這樣的效果——而現(xiàn)在輕松的只需要幾行css代碼。希望你們也覺(jué)得這個(gè)效果很有趣，你可以換成你的頭像試一下！

總結(jié)

以上是生活随笔為你收集整理的闪光css,CSS实现的一闪而过的图片闪光效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。