css3實現邊框具有動態環形遮罩效果
分享一段程式碼例項,它實現了邊框動態環形遮罩效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding: 0; margin: 0; } .circle-wrap { position: relative; float: left; margin-left: 20px; width: 210px; height: 210px; border-radius: 50%; box-sizing: border-box; overflow: hidden; } .circle-wrap .circle-shut { width: 210px; height: 210px; border: 10px solid #000; border-right-color: red; border-bottom-color: red; border-radius: 50%; box-sizing: border-box; transition: all .8s ease-in-out; } .circle-wrap .circle-img { position: absolute; top: 10px; left: 10px; width: 190px; height: 190px; z-index: -1; border-radius: 50%; box-sizing: border-box; } .circle-wrap .circle-img img { max-width: 100%; } .circle-wrap .circle-details { position: absolute; top: 10px; left: 10px; width: 190px; height: 190px; z-index: 2; box-sizing: border-box; background-color: #000; opacity: 0; transition: opacity 1s ease-in-out; border-radius: 50%; } .circle-wrap .circle-details-main { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; text-align: center; line-height: 200px; color: #fff; font-weight: 700; opacity: 0; transition: opacity 1s ease-in-out; } .circle-wrap:hover .circle-shut { transform: rotate(90deg); } .circle-wrap:hover .circle-details { opacity: .5; } .circle-wrap:hover .circle-details-main { opacity: 1; } </style> </head> <body> <div class="circle-wrap"> <div class="circle-shut"></div> <div class="circle-details"></div> <div class="circle-details-main">螞蟻部落一</div> </div> <div class="circle-wrap"> <div class="circle-shut"></div> <div class="circle-details"></div> <div class="circle-details-main">螞蟻部落二</div> </div> <div class="circle-wrap"> <div class="circle-shut"></div> <div class="circle-details"></div> <div class="circle-details-main">螞蟻部落三</div> </div> </body> </html>
相關文章
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- css3實現線條環形動態運動效果CSSS3
- css動態邊框效果CSS
- css3實現0.5px邊框效果CSSS3
- CSS3實現多樣的邊框效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- css3鋸齒形邊框效果程式碼例項CSSS3
- CSS 邊框動態環繞CSS
- CSS3多層邊框效果CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- css實現的交叉邊框效果CSS
- css實現邊框陰影效果CSS
- css3動態圓形鐘錶效果CSSS3
- CSS3實現0.5px邊框CSSS3
- canvas實現具有粒子效果的動態進度條Canvas
- CSS 線條環形動態運動效果CSS
- CSS3環形輻射效果CSSS3
- css3實現動態圓形導航欄CSSS3
- css3 動態條紋邊框程式碼例項CSSS3
- CSS實現流動邊框CSS
- CSS3郵票鋸齒邊框效果詳解CSSS3
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- 如何實現全屏遮罩層效果遮罩
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- css3實現的多重邊框程式碼例項CSSS3
- css3實現環狀旋轉效果CSSS3
- 實現環形進度條效果【一】
- css3實現滑鼠劃過圖片具有閃光效果CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- canvas實現的動態心形效果程式碼例項Canvas
- CSS 實現仿 Windows10 滑鼠照亮邊框效果CSSWindows
- css3實現平行四邊形程式碼例項CSSS3
- 【譯】CSS遮罩實現過渡效果CSS遮罩
- CSS3實現的文字框陰影發光效果CSSS3
- 利用SVG和css3實現炫酷的邊框動畫SVGCSSS3動畫