html - 使用纯 css3 的动画提交/进度按钮

Question

如何才能达到显示的效果here使用纯 css3。

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