圖片滑過亮光光弧效果程式碼例項
分享一段程式碼例項,它利用css3實現了一道亮光弧滑過效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } html{ font-size: 62.5%; line-height: 1; font-family: 'Microsoft YaHei',sans-serif; font-size: 14px; font-size: 1.4rem; } .logo{ position:relative; overflow: hidden; } .logo img{ display:block; width:200px; } .logo:hover:before{ content: ""; position: absolute; top: 50%; left: -7%; width: 200px; height: 20px; background:-webkit-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%); background:-moz-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%); background:-o-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%); background:-ms-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%); background:linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%); transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); animation:light 0.6s ease-out; -webkit-animation:light 0.6s ease-out; -moz-animation:light 0.6s ease-out; -o-animation:light 0.6s ease-out; } @-webkit-keyframes light{ 0%{ left:-7%; top:50%; } 100% { left:8%; top:60%; } } @keyframes light{ 0%{ left:-7%; top:50%; } 100% { left:8%; top:60%; } } </style> </head> <body> <div class="logo"> <img src="demo/CSS/img/tree.jpg" alt="" /> </div> </body> </html>
相關文章
- 滑鼠滑過圖片出現光弧效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- js圖片碎片化效果程式碼例項JS
- 滑鼠虛滑過選項卡切換效果程式碼例項
- 滑鼠滑過實現淡入淡出效果程式碼例項
- css實現圖片灰度效果程式碼例項CSS
- 圖片上傳預覽效果程式碼例項
- js圖片淡入淡出效果程式碼例項JS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- 圖片正反面翻轉效果程式碼例項
- js左右滑動選項卡效果程式碼例項JS
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- css實現圖片上下左右居中效果程式碼例項CSS
- html5拖動上傳圖片效果程式碼例項HTML
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- jquery實現的滑動軸效果程式碼例項jQuery
- css圖片變黑白程式碼例項CSS
- 利用css切割圖片程式碼例項CSS
- canvas流星劃過星空效果程式碼例項Canvas
- jQuery大圖跟隨效果程式碼例項jQuery
- 隨機漂浮圖片廣告例項程式碼隨機
- javascript圖片預載入程式碼例項JavaScript
- 圖片轉Base64程式碼例項
- CSS3 圖片由遠及近自動放大效果程式碼例項CSSS3
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- 圖片不存在使用預設圖片替代程式碼例項
- css實現滑鼠滑過切換背景圖片程式碼CSS
- css3控制多個背景圖片移動形成動畫效果程式碼例項CSSS3動畫
- js圖片緩衝載入程式碼例項JS
- 上傳圖片本地預覽例項程式碼
- 獲取img圖片原始尺寸程式碼例項
- 圖片尺寸大小自適應程式碼例項
- 按比例縮放圖片大小程式碼例項
- jQuery 動畫效果程式碼例項jQuery動畫
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS