滑鼠懸浮出現圓形資訊遮罩層
分享一段程式碼例項,它實現了滑鼠懸浮出現圓形遮罩層的效果。
遮罩層之上有資訊描述,程式碼例項如下:
[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; } ul { list-style: none; } .icon-lists { overflow: hidden; background: #f7f7f7; padding: 40px; } .icon-lists .box { float: left; margin-right: 10px; } .box { position: relative; width: 46px; height: 46px; overflow: hidden; z-index: 1; } .box .info { display: block; width: 46px; height: 46px; border-radius: 46px; } .box .icon { position: absolute; top: 0; line-height: 46px; text-align: center; background: #eee; color: #333; font-size: 14px; } .box .info { position: absolute; top: 46px; z-index: 2; background: orange; color: #fff; text-align: center; line-height: 46px; -webkit-transition: top .2s ease-in; -moz-transition: top .2s ease-in; transition: top .2s ease-in; } .box:hover > .info { top: 0; } </style> </head> <body> <ul class="icon-lists"> <li class="box"> <i class="icon">A</i> <div class="info">div</div> </li> <li class="box"> <i class="icon">B</i> <div class="info">css3</div> </li> <li class="box"> <i class="icon">C</i> <div class="info">jquery</div> </li> <li class="box"> <i class="icon">D</i> <div class="info">json</div> </li> </ul> </body> </html>
上面的程式碼實現了我們的要去,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼* { margin: 0; padding: 0; }
刪除所有元素的外邊距和內編劇。
星號是一個萬用字元選擇器,可以參閱CSS 通配選擇符(*)一章節。
其實在實際專案中通常會使用專門的重置css,具體可以參閱css預重置樣式程式碼一章節。
[CSS] 純文字檢視 複製程式碼ul { list-style: none; }
去掉預設的li元素前面的樣式。
[CSS] 純文字檢視 複製程式碼.icon-lists { overflow: hidden; background: #f7f7f7; padding: 40px; }
容器的樣式,設定背景色和內邊距等。
[CSS] 純文字檢視 複製程式碼.icon-lists .box { float: left; margin-right: 10px; }
設定左浮動,外右邊邊距是10px。
[CSS] 純文字檢視 複製程式碼.box { position: relative; width: 46px; height: 46px; overflow: hidden; z-index: 1; }
設定元素為相對定位,目的是讓內部定位的元素以它為參考物件。
[CSS] 純文字檢視 複製程式碼.box .info { display: block; width: 46px; height: 46px; border-radius: 46px; }
設定資訊元素的相關樣式。
這裡比較關鍵的就是將它設定為圓形。
[CSS] 純文字檢視 複製程式碼.box .icon { position: absolute; top: 0; line-height: 46px; text-align: center; background: #eee; color: #333; font-size: 14px; }
設定預設狀態存放ABCD字元的元素的樣式。
[CSS] 純文字檢視 複製程式碼.box .info { position: absolute; top: 46px; z-index: 2; background: orange; color: #fff; text-align: center; line-height: 46px; -webkit-transition: top .2s ease-in; -moz-transition: top .2s ease-in; transition: top .2s ease-in; }
設定資訊元素的樣式,預設top值是46px,也就是說它是隱藏的。
並且通過transition設定top以動畫方式改變。
[CSS] 純文字檢視 複製程式碼.box:hover > .info { top: 0; }
滑鼠懸浮改變資訊元素的top值。
二.相關閱讀:
(1).position可以參閱css position一章節。
(2).transition可以參閱CSS3 transition一章節。
(3).:hover可以參閱CSS E:hover一章節。
相關文章
- CSS滑鼠懸浮出現遮罩層程式碼演示CSS遮罩
- CSS3滑鼠懸浮出現半透明遮罩層詳解CSSS3遮罩
- 滑鼠懸浮出現十字架形滑鼠指標指標
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- css3實現滑鼠懸浮出現一個說明層程式碼例項CSSS3
- 滑鼠懸浮出現下拉選單程式碼例項
- 滑鼠懸浮從中心放大和縮小的半透明遮罩層遮罩
- 滑鼠懸停新增遮罩及圖示。遮罩
- 滑鼠懸浮上浮出現說明文字程式碼例項
- css3實現的滑鼠懸浮出現輻射波紋效果CSSS3
- 滑鼠懸浮出現tips提示框效果程式碼例項
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- 滑鼠懸浮實現環形旋轉效果
- 【譯】使用CSS Transitions實現圓形懸停效果CSS
- 滑鼠懸浮可以實現圓角矩形明亮變化效果
- 根據滑鼠的方位出現遮罩層效果程式碼例項遮罩
- 遮罩層遮罩
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- 滑鼠懸浮三形選單變叉號
- css滑鼠懸浮彈出說明層效果CSS
- 如何實現全屏遮罩層效果遮罩
- CSS3標懸浮圓形縮放效果CSSS3
- 純 CSS 實現縷空遮罩層CSS遮罩
- jQuery滑鼠懸停顯示提示資訊視窗jQuery
- 別用圖片了,CSS遮罩合成實現帶圓角的環形loading動畫CSS遮罩動畫
- Android 圓角、圓形 ImageView 實現AndroidView
- 能夠感知滑鼠移動方位的遮罩層效果程式碼例項遮罩
- 滑鼠懸浮div實現旋轉效果
- 圓形 ImageView 的實現方法View
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- jQuery根據滑鼠進入的方位出現動畫遮罩效果jQuery動畫遮罩
- Android自定義遮罩層Android遮罩
- css實現圓形、橢圓和半圓效果程式碼例項CSS
- 滑鼠懸浮實現連結背景變色效果
- js滑鼠懸浮字串實現字串跳動效果JS字串
- 滑鼠懸浮實現翻牌效果程式碼例項