CSS 邊框動態環繞
下面分享一段程式碼例項,它實現了邊框環繞效果。
程式碼例項如下:
[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>
上面程式碼實現了邊框環繞效果,下面介紹一下它的實現過程。
相關文章
- CSS3邊框動態環繞效果CSSS3
- CSS實現流動邊框CSS
- CSS3小球靜態環繞效果CSSS3
- CSS 邊框陰影立體邊框CSS
- CSS 奇思妙想邊框動畫CSS動畫
- CSS border邊框CSS
- css-虛線邊框滾動效果CSS
- 如何在pyqt中給無邊框視窗新增DWM環繞陰影QT
- css圓角矩形邊框CSS
- CSS 3半透明邊框CSS
- CSS border-radius 帶邊框CSS
- 教你玩轉CSS border(邊框)CSS
- 【叢林】CSS 邊框淺談CSS
- CSS文字環繞圖片效果CSS
- css揭祕 - 背景與邊框 [一]CSS
- CSS的秘密——背景和邊框(下)CSS
- css設定四角邊框CSS
- CSS 設定邊框透明度CSS
- CSS圖片邊框陰影效果CSS
- CSS border-collapse 細線邊框CSS
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- 巧用 CSS 實現炫彩三角邊框動畫CSS動畫
- CSS將邊框設定為虛線CSS
- CSS設定div邊框演示程式碼CSS
- CSS3 border-radius帶邊框CSSS3
- CSS 線條環形動態運動效果CSS
- css地球月亮太陽環繞旋轉CSS
- CSS 寫個帶邊框背景色透明的訊息框CSS
- 小影片軟體開發,實現一個CSS邊框動畫CSS動畫
- backdrop-filter(純CSS實現絲滑邊框線條動畫)FilterCSS動畫
- 利用SVG和css3實現炫酷的邊框動畫SVGCSSS3動畫
- CSS Grid 網格佈局邊框設定CSS
- 如何實現css漸變圓角邊框CSS
- CSS揭祕筆記(2):背景與邊框CSS筆記
- BootStrap的動態模態框及靜態模態框boot
- 漸變邊框文字效果?CSS 輕鬆拿捏!CSS
- CSS3實現多樣的邊框效果CSSS3