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

【问题标题】：Animated submit/progress buttons with pure css3带有纯 css3 的动画提交/进度按钮
【发布时间】：2015-03-20 20:00:16
【问题描述】：

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

【问题讨论】：

你看过cmets了吗？这很接近：codepen.io/rikschennink/pen/mjBsA
是的，已经接近了，但是没有实现边框上的圆形加载效果

标签： html css html5-animation

【解决方案1】：

使用这个（纯 CSS/没有 javascript）：

我创建了一个示例，可能仍然不是您想要的，但它是我最接近的。

示例 (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

【讨论】：

发现这个article真的很接近
@254code_rep 你说的是“纯css”，但是这篇文章用的是lesscss，那么javascript可以，那么我们可以用canvas代替css。
@GuilhermeNascimento，Less CSS 是“纯 CSS”，你只需要编译它。 JavaScript 不会编译成 CSS，是吗？ :-D
@SteelBrain 没有“少 CSS”实际上不是“CSS”。它没有被编译它是“预处理器”。在我之前的 comment 我说的是他在“纯 css3”（请阅读问题的标题）中提出的问题，换句话说，没有额外的库。感谢您的评论。
抱歉，我无法详细说明我想说的话。我的意思是，我们最终会得到什么？我们得到的是纯 CSS，这意味着可以为 css 推荐一篇更少的文章。 less 是预处理的，不是每次都处理的东西 :-D ，谢谢你的回复。