前端的鼠標滑過圖片閃光CSS3效果怎么做

來源：懂視網責編：小采時間：2020-11-27 15:31:25

前端的鼠標滑過圖片閃光CSS3效果怎么做

前端的鼠標滑過圖片閃光CSS3效果怎么做:兩三年前雞哥還是個學生的時候做了本站的前端頁面，其實現在這個站有很多前身，有機會發個帖子給大家看看雞哥以前的年少無知不懂事的殺馬特作品...好了，今天聊聊怎么做鼠標滑過圖片的時候有反光閃光的效果，這個效果還是在逛京東的時候無意間發現的，大家看

推薦度：

點擊下載本文 文檔為doc格式

導讀前端的鼠標滑過圖片閃光CSS3效果怎么做:兩三年前雞哥還是個學生的時候做了本站的前端頁面，其實現在這個站有很多前身，有機會發個帖子給大家看看雞哥以前的年少無知不懂事的殺馬特作品...好了，今天聊聊怎么做鼠標滑過圖片的時候有反光閃光的效果，這個效果還是在逛京東的時候無意間發現的，大家看

兩三年前雞哥還是個學生的時候做了本站的前端頁面，其實現在這個站有很多前身，有機會發個帖子給大家看看雞哥以前的年少無知不懂事的殺馬特作品...
好了，今天聊聊怎么做鼠標滑過圖片的時候有反光閃光的效果，這個效果還是在逛京東的時候無意間發現的，大家看看下邊的成品演示：不然說了半天還不知道要做啥效果可尷尬了，哦對了，這種情況叫做什么？ “尬聊”

前端的鼠標滑過圖片閃光CSS3效果怎么做？

大家看到了吧，今天文章就是介紹這種效果怎么實現
- Ps：有一點html基礎的人會很容易看明白，如果沒有基礎的人可能會看起來比較吃力。
先把代碼貼出來吧：

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

上邊這是html里邊的代碼，沒多少，還是比較簡單的，重點是后邊的css代碼要仔細看和分析參了很多css3的知識點

div{width:800px;height:600px;overflow:hidden;} /div寬度和高度 超出隱藏
div a:hover::before{transition: all 0.5s;left:850px;} /css3過度樣式 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樣式代碼，雞哥只是簡單的寫了個demo給大家演示一下，其實后邊的反光樣式代碼也是雞哥復制的，好久沒寫了忘完了，只能復制了，大家哪里不明白可以百度，把不明白的代碼百度一下就明白了。

具體的思想理論就是給a標簽上方加了一個透明層，通過定位壓在a標簽上，這個透明層就是上邊代碼中的before，當然也可以是其他隨便一個標簽，每個人習慣不一樣，然后通過css3的鼠標經過過度樣式讓這個透明層從做向右滑動就實現了這種反光的效果。

好了具體方法已經給大家分享出來了，如果要用到自己的項目中還要有點html+css的基礎的，不然寸步難行。

下邊我把剛剛寫的demo打包了一下，如果不太明白的小伙伴可以下載來仔細研究。

原文鏈接：前端的鼠標滑過圖片閃光CSS3效果怎么做？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com