CSS3動畫方式增加線條長度
分享一段程式碼例項,它以動畫方式增加線條的長度。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { height: 2px; background: #000; animation: width 3s linear infinite alternate; } @keyframes width { from { width: 0px; } to { width: 100%; } } </style> </head> <body> <div class="box"></div> </body> </html>
上面的程式碼實現了我們的要求,更多內容參閱相關閱讀。
相關閱讀:
(1).animation屬性參閱CSS3 animation一章節。
(2).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- css3動畫實現數字動態增加CSSS3動畫
- svg 線條動畫淺嘗SVG動畫
- SVG 線條動畫入門SVG動畫
- css3實現動畫有幾種方式?CSSS3動畫
- css3 製作圓環進度條CSSS3
- CSS3圓形進度條效果CSSS3
- CSS3進度條效果程式碼CSSS3
- Qml 實現水波進度動畫條動畫
- 簡單的SVG線條動畫SVG動畫
- JavaScript與CSS3動畫方式改變元素尺寸JavaScriptCSSS3動畫
- CSS3動畫方式改變div元素的尺寸CSSS3動畫
- CSS3實現原型進度條效果CSSS3原型
- 超酷jQuery進度條載入動畫集合jQuery動畫
- SVG 實現複雜線條動畫SVG動畫
- CSS3 螺紋載入進度條效果CSSS3
- Javascript 及 CSS3 實現進度條效果JavaScriptCSSS3
- 【Android】自定義ProgressView-進度條動畫AndroidView動畫
- android 自定義酷炫進度條動畫Android動畫
- app直播原始碼,edusoho直播回放增加進度條APP原始碼
- css3常用動畫+動畫庫CSSS3動畫
- JavaScript動畫方式改變元素寬度和高度JavaScript動畫
- CSS3動畫CSSS3動畫
- Adorner實現邊框線條動畫動畫
- CSS3帶有節點的進度條效果CSSS3
- 寫一個酷炫的iOS進度條動畫iOS動畫
- CSS3動畫之逐幀動畫CSSS3動畫
- CSS3動畫(360度旋轉、旋轉放大、放大、移動)CSSS3動畫
- svg和css3建立環形漸變進度條SVGCSSS3
- css3實現的進度條程式碼例項CSSS3
- HTML5/CSS3超酷進度條 不同進度多種顏色HTMLCSSS3
- CSS3 動畫解析CSSS3動畫
- CSS3 animation 動畫CSSS3動畫
- css3動畫整理CSSS3動畫
- opencv計算曲線長度OpenCV
- Vue canvas繪製圓形進度條動畫載入VueCanvas動畫
- 【動畫進階】巧用 CSS/SVG 實現複雜線條光效動畫動畫CSSSVG
- 為NProgress增加模態層,更完美的應用於複雜網頁的細長進度條網頁
- 30個jQuery & CSS3載入動畫和進度欄外掛jQueryCSSS3動畫