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 { width: 400px; height: 400px; position: relative; background: #ccc; } .line { height: 3px; width: 400px; background: #c56; position: absolute; top: 200px; left: 200px; -webkit-transform: rotate(45deg); animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari 和 Chrome */ -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } @keyframes mymove { from { width: 0px; } to { width: 400px; } } @-webkit-keyframes mymove { from { width: 0px; } to { width: 400px; } } </style> </head> <body> <div class="antzone"> <div class="line animated"></div> </div> </body> </html>
相關文章
- web 中怎麼實現斜線表頭效果?Web
- 純 CSS 實現斜紋效果CSS
- CSS3 方塊不間斷彈跳效果CSSS3
- DIV+CSS 斜線效果CSS
- Omdia觀察:伺服器的使用年限不斷延長伺服器
- js 反斜槓\實現折行效果JS
- CSS3文字不斷流光滑過效果CSSS3
- 延長不間斷供電系統壽命的方法
- css3實現翻牌效果CSSS3
- css3實現的矩形切角效果CSSS3
- css斜線效果程式碼例項CSS
- javascript實現延遲載入效果JavaScript
- css3實現線條環形動態運動效果CSSS3
- css3實現的簡單動畫效果CSSS3動畫
- css3實現的紅心跳動效果CSSS3
- js實現的單行文字不間斷無縫滾動效果JS
- 使用CSS mask 實現圖片的斜線拼接CSS
- css3實現的旋轉的陀螺效果CSSS3
- css3實現動畫閃爍效果CSSS3動畫
- css3實現元素垂直居中效果CSSS3
- CSS3實現多種背景效果CSSS3
- css3實現的立體滾動效果CSSS3
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- css3和javascript實現的時鐘效果CSSS3JavaScript
- CSS3實現多樣的邊框效果CSSS3
- CSS3實現的多重背景效果程式碼CSSS3
- CSS3實現的頁面反轉效果CSSS3
- css3實現的矩形圓角切角效果CSSS3
- css3實現的立方體旋轉效果CSSS3
- css3實現的相機鏡頭效果CSSS3
- css3實現的滾動的檯球效果CSSS3
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- css3實現的折角效果程式碼例項CSSS3
- jQuery和css3實現的電子錶效果jQueryCSSS3
- js和css3實現的扇子展開效果JSCSSS3
- 純CSS3屬性animation實現的打字效果CSSS3
- CSS3 實現兩端擺動的小球效果CSSS3