滑鼠滑過圖片出現光弧效果程式碼例項
本章節分享一段程式碼例項,它實現了滑鼠滑過圖片上出現光弧效果。
當然說光弧也許描述不太準確,大家可以看下面的程式碼演示。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .overimg { position: relative; display: block; box-shadow: 0 0 10px #fff; } .light { cursor: pointer; position: absolute; left: -180px; top: 0; width: 580px; height: 200px; 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: skewX(-25deg); -o-transform: skewX(-25deg); -moz-transform: skewX(-25deg); -webkit-transform: skewX(-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/antzoneP.jpg"></a> <i class="light"></i> </p> </body> </html>
效果其實非常的簡單,更多內容可以參閱相關閱讀:
相關閱讀:
(1).linear-gradient可以參閱css3 linear-gradient一章節。
(2).transform可以參閱CSS3 transform一章節。
相關文章
- 圖片滑過亮光光弧效果程式碼例項
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 滑鼠滑過實現淡入淡出效果程式碼例項
- 滑鼠虛滑過選項卡切換效果程式碼例項
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- css實現滑鼠滑過切換背景圖片程式碼CSS
- css實現圖片灰度效果程式碼例項CSS
- 滑鼠懸浮連結出現音效效果程式碼例項
- css3實現滑鼠劃過圖片具有閃光效果CSSS3
- 滑鼠滑過實現table表格行背景變色程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- 根據滑鼠的方位出現遮罩層效果程式碼例項遮罩
- CSS實現的滑鼠滑過改變連結文字例項程式碼CSS
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- js圖片碎片化效果程式碼例項JS
- 滑鼠懸浮實現翻牌效果程式碼例項
- jquery實現的滑動軸效果程式碼例項jQuery
- css實現圖片上下左右居中效果程式碼例項CSS
- 圖片上傳預覽效果程式碼例項
- js圖片淡入淡出效果程式碼例項JS
- 滑鼠懸浮實現抖動效果例項程式碼
- jQuery選項卡切換圖片效果程式碼例項jQuery
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 圖片正反面翻轉效果程式碼例項
- js左右滑動選項卡效果程式碼例項JS
- 滑鼠懸浮評分效果程式碼例項
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- 滑鼠懸浮出現tips提示框效果程式碼例項
- jQuery實現的滑鼠滑過連結出現自定義提示效果jQuery
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠滑過改變元素的背景圖片
- css實現的滑鼠滑過星星高亮效果CSS
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- 滑鼠放在圖片實現高亮效果
- html5拖動上傳圖片效果程式碼例項HTML
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3