css3螞蟻線邊框程式碼例項
本章節分享一段程式碼例項,它實現了螞蟻線邊框效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { background-color: rgb(229, 201, 255); } .father { width: 280px; height: 180px; background-color: #fff; padding: 1px; background-image: -webkit-linear-gradient(-45deg,rgba(0, 0, 0, 1) 25%,rgba(0, 0, 0, 0) 25%,rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 1) 50%,rgba(0, 0, 0, 1) 75%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0)); background-size: 10px 10px; animation: myAnimation 0.8s linear; animation-iteration-count: infinite; } .child { width: 280px; height: 180px; background-color: rgba(255,255,255,1); } @keyframes myAnimation { 0% { background-position: 0px 0px; } 50% { background-position: 0px 5px; } 100% { background-position: 0px 10px; } } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html>
相關文章
- canvas螞蟻線效果程式碼例項Canvas
- div虛線邊框程式碼例項
- css3實現的多重邊框程式碼例項CSSS3
- css3 動態條紋邊框程式碼例項CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css內邊框效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css半透明邊框程式碼例項CSS
- css條紋邊框程式碼例項CSS
- css實現半透明邊框程式碼例項CSS
- outline兩層邊框程式碼例項
- CSS設定邊框為透明程式碼例項CSS
- css3半透明邊框程式碼CSSS3
- CSS設定元素邊框樣式例項程式碼CSS
- css3實現平行四邊形程式碼例項CSSS3
- CSS3繪製平行四邊形程式碼例項CSSS3
- SVG設定邊框的透明度程式碼例項SVG
- 去掉連結a的虛線框程式碼例項
- CSS3實現的平行四邊形程式碼例項CSSS3
- css3邊框顏色漸變且四角有內凹圓形程式碼例項CSSS3
- CSS虛線邊框效果程式碼CSS
- css3線性漸變簡單程式碼例項CSSS3
- CSS3雪人程式碼例項CSSS3
- 密碼框提示文字程式碼例項密碼
- linear-gradient屬性製作邊框程式碼例項
- CSS3卡通形象程式碼例項CSSS3
- css3 animation動畫程式碼例項CSSS3動畫
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css3實現的漸變線交錯程式碼例項CSSS3
- css六邊形效果程式碼例項CSS
- 搜尋框關鍵字智慧匹配例項程式碼例項