带纯css3的动画提交/进度按钮

Question

如何使用纯css3实现here显示的效果。

Answer 1

使用这个（纯CSS /无javascript）：

• Animated progress circle in CSS

• Using the :target selector

我创建一个例子，可能仍然不是你在找什么，但这是我最亲近的。

例（Demo in jsfiddle）：

<style> 
@-webkit-keyframes rotate { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 

    to { 
     -webkit-transform: rotate(360deg); 
    } 
} 

@-moz-keyframes rotate { 
    from { 
     -moz-transform: rotate(0deg); 
    } 

    to { 
     -moz-transform: rotate(360deg); 
    } 
} 

@-o-keyframes rotate { 
    from { 
     -o-transform: rotate(0deg); 
    } 

    to { 
     -o-transform: rotate(360deg); 
    } 
} 

@keyframes rotate { 
    from { 
     transform: rotate(0deg); 
    } 

    to { 
     transform: rotate(360deg); 
    } 
} 

#startupload:target { 
    /*"disable" button*/ 
    background: transparent; 
    border: none; 
} 

#startupload:target div.before { 
    /*Hide If has hash in url address browser*/ 
    display: none; 
} 

#startupload div.progress-circle-container { 
    position: relative; 
    height: 230px; 
    width: 230px; 
    margin: 0 auto; 
    display: none; /*hide If no Hash in address*/ 
} 
#startupload:target div.progress-circle-container { 
    display: block; /*Show If Hash in address*/ 
} 

#startupload div.progress-circle-container div.progress-circle-outer { 
    background-color: #faef85; 
    background-repeat: repeat-x; 
    background-image: -moz-linear-gradient(0deg, #d66f0f, #faef85); 
    background-image: -webkit-linear-gradient(0deg, #d66f0f, #faef85); 
    background-image: -o-linear-gradient(0deg, #d66f0f, #faef85); 
    background-image: linear-gradient(0deg, #d66f0f, #faef85); 
    width: 230px; 
    height: 230px; 
    position: absolute; 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
    -webkit-animation: rotate 2.2s infinite linear; 
    -moz-animation: rotate 2.2s infinite linear; 
    -o-animation: rotate 2.2s infinite linear; 
    animation: rotate 2.2s infinite linear; 
    -webkit-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25); 
    -moz-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25); 
    box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25); 
    -webkit-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
} 

#startupload:target div.progress-circle-container div.progress-circle-outer.animate { 
    -webkit-animation-play-state: running; 
    -moz-animation-play-state: running; 
    -o-animation-play-state: running; 
    animation-play-state: running; 
} 

#startupload div.progress-circle-container div.progress-circle-inner { 
    height: 170px; 
    width: 170px; 
    margin: 0 auto; 
    position: absolute; 
    left: 30px; 
    top: 30px; 
    -webkit-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
    background-color: #fff;/*change color background*/ 
    -webkit-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3); 
    box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3); 
    text-align: center; 
} 
</style> 

<form action="#startupload"> 
    <button id="startupload" type="submit"> 
     <div class="before"> 
      Start upload 
     </div> 
     <div class="progress-circle-container"> 
      <div class="progress-circle-outer animate"> 
      </div> 
      <div class="progress-circle-inner"></div> 
     </div> 
    </button> 
</form> 

---

也许最终的目标，以达到最佳的是一样的东西：

css3 animations frame by frame