CSS3提交按鈕等待打點迴圈效果
本章節分享一段程式碼例項,它實現了提交按鈕打點等待效果。
這樣的效果是比較人性化的,可以讓使用者很容易的指導,網頁是在工作中,只需要耐心等待就可以。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .grebtn { display:inline-block; padding:0.25em 1.25em; border:1px solid; border-radius:2px; vertical-align:bottom; font-weight:inherit; border-color:#208000 #1F7F00; background-color:#289600; box-shadow:inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62; color:#fff; text-shadow:0 -1px #137900; text-decoration:none; } .dotting { display:inline-block; min-width:2px; min-height:2px; box-shadow:2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; -webkit-animation:dot 4s infinite step-start both; animation:dot 4s infinite step-start both; *zoom: expression(this.innerHTML = '...'); /* IE7 */ } .dotting:before { content: '...'; } /* IE8 */ .dotting::before { content: ''; } :root .dotting { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */ @-webkit-keyframes dot { 25% { box-shadow: none; } 50% { box-shadow: 2px 0 currentColor; } 75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; } } @keyframes dot { 25% { box-shadow: none; } 50% { box-shadow: 2px 0 currentColor; } 75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; } } </style> <head> </head> <body> <a href="javascript:" class="grebtn">訂單提交中<span class="dotting"></span></a> </body> </html>
相關文章
- css3實現的美觀的提交按鈕效果CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS3 checkbox開關按鈕效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3滑動開關按鈕效果CSSS3
- CSS3叉號按鈕效果詳解CSSS3
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- 點選提交按鈕實現彈出警告框表單驗證效果
- CSS3 radio單選按鈕美化效果CSSS3
- CSS3簡單圓角立體按鈕效果CSSS3
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- JavaScript點選按鈕彈出層效果JavaScript
- uniapp點選按鈕提交textarea值為undifineAPP
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 美妙的 CSS3 動畫!夢幻般的按鈕效果CSSS3動畫
- js表單提交後提交按鈕不可點選程式碼例項JS
- css3點狀旋轉載入等待效果CSSS3
- JavaScript點選按鈕數字加1效果JavaScript
- 點選按鈕實現數字增加效果
- css3實現button按鈕美化效果程式碼例項CSSS3
- 點選按鈕實現狀態切換效果
- 點選按鈕實現圖片切換效果
- 精選10款CSS3實現的酷炫按鈕效果CSSS3
- javascript實現的點選不同提交按鈕實現提交到不同頁面JavaScript
- css立體按鈕效果CSS
- CSS 叉號按鈕效果CSS
- 按鈕滾動條效果
- css3迴圈漸隱漸現效果程式碼例項CSSS3
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- CSS3載入等待動畫效果CSSS3動畫
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- CSS3旋轉載入等待效果CSSS3
- 單選按鈕美化效果程式碼
- css實現圓角按鈕效果CSS
- css叉號關閉按鈕效果CSS
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- 前端特效【第02期】|多功能提交按鈕前端特效
- css3將radio單選按鈕模擬為按鈕形狀CSSS3