CSS3邊框動態環繞效果
下面分享一段程式碼例項,它實現了邊框環繞效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .antzone, .antzone::before, .antzone::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .antzone { width: 200px; height: 200px; margin: auto; color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .antzone::before, .antzone::after { content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .antzone::before { animation-delay: -4s; } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220.0px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220.0px, 0px); } 50% { clip: rect(218.0px, 220.0px, 220.0px, 0px); } 75% { clip: rect(0px, 220.0px, 220.0px, 218.0px); } } </style> </head> <body> <div class="antzone"></div> </body> </html>
上面程式碼實現了邊框環繞效果,下面介紹一下它的實現過程。
相關文章
- CSS 邊框動態環繞CSS
- CSS3小球靜態環繞效果CSSS3
- CSS3多層邊框效果CSSS3
- CSS3實現多樣的邊框效果CSSS3
- css-虛線邊框滾動效果CSS
- CSS3動態月食效果詳解CSSS3
- css3氣泡動態上升效果CSSS3
- CSS3動態餅狀圖效果CSSS3
- 如何在pyqt中給無邊框視窗新增DWM環繞陰影QT
- CSS3 border-radius帶邊框CSSS3
- CSS文字環繞圖片效果CSS
- CSS3文字動態填充背景效果CSSS3
- CSS圖片邊框陰影效果CSS
- CSS虛線邊框效果程式碼CSS
- 如何使用CSS3的屬性設定模擬邊框跟border效果一樣?CSSS3
- 利用SVG和css3實現炫酷的邊框動畫SVGCSSS3動畫
- CSS3撥打電話動態圖示效果CSSS3
- 立體感的邊框陰影效果
- 網頁頂部陰影邊框效果網頁
- CSS3圓環效果程式碼CSSS3
- CSS3環形輻射效果CSSS3
- CSS 線條環形動態運動效果CSS
- 線上直播原始碼,JS動態效果之,側邊欄滾動固定效果原始碼JS
- table表格細線且去掉外邊框效果
- CSS3文字的描邊鏤空效果CSSS3
- 漸變邊框文字效果?CSS 輕鬆拿捏!CSS
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- BootStrap的動態模態框及靜態模態框boot
- CSS實現流動邊框CSS
- CSS 實現仿 Windows10 滑鼠照亮邊框效果CSSWindows
- css3小球上下移動效果CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS3 div水平運動效果CSSS3
- css3動畫效果抖動解決CSSS3動畫
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- CSS 邊框陰影立體邊框CSS
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- 小視訊原始碼,CSS 實現半透明邊框效果原始碼CSS