css3實現滑鼠劃過圖片具有閃光效果
本章節分享一段程式碼例項,它實現了滑鼠劃過圖片具有閃光效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .overimg{ position: relative; display: block; /* overflow: hidden; */ box-shadow: 0 0 10px #FFF; } .light{ cursor:pointer; position: absolute; left: -180px; top: 0; width: 180px; height: 90px; background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skew(-25deg); -o-transform: skew(-25deg); -moz-transform: skew(-25deg); -webkit-transform: skew(-25deg); } .overimg:hover .light{ left:180px; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; } </style> </head> <body> <p class="overimg"> <a><img src="demo/CSS/img/flash.jpg"></a> <i class="light"></i> </p> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).linear-gradient可以參閱css3 linear-gradient線性漸變一章節。
(2).transform可以參閱CSS3 transform屬性一章節。
(3).transition可以參閱CSS3 transition一章節。
相關文章
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- 滑鼠滑過圖片出現光弧效果程式碼例項
- 滑鼠放在圖片實現高亮效果
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- css3實現動畫閃爍效果CSSS3動畫
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- jquery實現的具有漸變效果的圖片切換jQuery
- CSS3滑鼠懸停圖片動畫 多種文字動畫效果CSSS3動畫
- js滑鼠移動實現圖片立體滾動效果JS
- 滑鼠懸浮實現當前圖片高亮效果詳解
- 舉重若輕流水行雲,前端純CSS3實現質感非凡的圖片Logo滑鼠懸停(hover)光澤一閃而過的光影特效前端CSSS3Go特效
- 使用CSS3實現3D圖片滑塊效果CSSS33D
- 圖片放大鏡效果實現過程詳解
- css滑鼠浮劃過切換按鈕背景圖片CSS
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- css實現滑鼠滑過切換背景圖片程式碼CSS
- CSS3圖片旋轉效果CSSS3
- CSS3圖片拉近放大效果CSSS3
- 圖片模糊效果實現(RenderScript)
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- CSS3實現的文字框陰影發光效果CSSS3
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- css3實現的滑鼠懸浮出現輻射波紋效果CSSS3
- Dreamweaver製作滑鼠經過圖片漸漸變暗效果教程
- css實現的滑鼠滑過星星高亮效果CSS
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- css3實現的具有漸變效果的選項卡功能CSSS3
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- JS實現馬賽克圖片效果JS
- PHP實現水印效果(文字、圖片)PHP
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery