前端的鼠標(biāo)滑過(guò)圖片閃光CSS3效果怎么做

大家看到了吧，今天文章就是介紹這種效果怎么實(shí)現(xiàn)
- Ps：有一點(diǎn)html基礎(chǔ)的人會(huì)很容易看明白，如果沒(méi)有基礎(chǔ)的人可能會(huì)看起來(lái)比較吃力。
先把代碼貼出來(lái)吧：

<div><a href="javascript:;"><img src="aaa.jpg"></a></div>

上邊這是html里邊的代碼，沒(méi)多少，還是比較簡(jiǎn)單的 ，重點(diǎn)是后邊的css代碼 要仔細(xì)看和分析 參了很多css3的知識(shí)點(diǎn)

div{width:800px;height:600px;overflow:hidden;} /div寬度和高度 超出隱藏
div a:hover::before{transition: all 0.5s;left:850px;} /css3過(guò)度樣式 before離左邊850像素
div a:before{content: ""; 
 position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);} /這里是給反光加樣式的css3代碼，就不一一解釋了

上邊就是css樣式代碼，雞哥只是簡(jiǎn)單的寫(xiě)了個(gè)demo給大家演示一下，其實(shí)后邊的反光樣式代碼也是雞哥復(fù)制的，好久沒(méi)寫(xiě)了忘完了，只能復(fù)制了，大家哪里不明白可以百度，把不明白的代碼百度一下就明白了。

具體的思想理論就是給a標(biāo)簽上方加了一個(gè)透明層，通過(guò)定位壓在a標(biāo)簽上，這個(gè)透明層就是上邊代碼中的before，當(dāng)然也可以是其他隨便一個(gè)標(biāo)簽，每個(gè)人習(xí)慣不一樣，然后通過(guò)css3的鼠標(biāo)經(jīng)過(guò)過(guò)度樣式讓這個(gè)透明層從做向右滑動(dòng)就實(shí)現(xiàn)了這種反光的效果。

好了具體方法已經(jīng)給大家分享出來(lái)了，如果要用到自己的項(xiàng)目中還要有點(diǎn)html+css的基礎(chǔ)的，不然寸步難行。

下邊我把剛剛寫(xiě)的demo打包了一下，如果不太明白的小伙伴可以下載來(lái)仔細(xì)研究。

原文鏈接：前端的鼠標(biāo)滑過(guò)圖片閃光CSS3效果怎么做？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com