CSS3 中的按钮效果与进度条

效果如图

CSS

<style type="text/css">
    .add-btn,.min-btn{
        width:140px;
        height:140px;
        border-radius:8px;
        background:#ccd0d4;
        position:relative;
        display:inline-block;
        box-shadow:inset 0 0 35px 5px rgba(0,0,0,0.25),inset 0 2px 1px 1px rgba(255,255,255,0.9),inset 0 -2px 1px 0 rgba(0,0,0,0.25);
    }
    input{
        opacity:0;
        width:100%;
        height:100%;
        position:absolute;
        z-index:999;
    }
    .btn{
        position:absolute;
        left:15%;
        top:15%;
        display:inline-block;
        background:#ccd0d4;
        width:96px;
        height:96px;
        border-radius:96px;
        box-shadow:0 15px 25px -4px rgba(0,0,0,0.25),inset 0 -3px 4px -1px rgba(0,0,0,0.2),0 -10px 15px -1px rgba(255,255,255,0.6),inset 0 3px 4px -1px rgba(255,255,255,0.2),inset 0 0 5px 1px rgba(255,255,255,0.8),inset 0 20px 30px 0 rgba(255,255,255,0.2);
        transition:all 0.3s;
    }
    .label{
        position:absolute;
        top:44px;
        left:59px;
        font-size:42px;
        display:inline-block;
        color:rgba(0,0,0,0.4);
        text-shadow:1px 1px 4px #ccd0d4,0 0 0 rgba(0,0,0,0.8),1px 1px 1px #fff;
    }
    input:checked ~ .btn {
  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}
input:checked ~ .label {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.4);
}
.loading{
    width:500px;
    height:20px;
    border-radius:20px;
    border:1px solid #000;
    background-color:#fff;
    background-size: 50px 50px;
    background-image:-webkit-linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
    
    background-image:-moz-linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
    
    background-image:linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
    -webkit-animation:loading 0.5s linear infinite;
    -moz-animation:loading 1.5s linear infinite;
    animation:loading 1.5s linear infinite;
}
@-webkit-keyframes loading {
    from {
 background-position: 0 0;
}
to {
    background-position: 160px  0px;
}
}
@-moz-keyframes loading {
    from {
 background-position: 0 0;
}
to {
    background-position: 160px  0px;
}
}
@keyframes loading {
    from {
 background-position: 0 0;
}
to {
    background-position: 160px  0px;
}
}
</style>

HTML

    <div class="add-btn">
        <input type="checkbox" />
        <span class="btn"></span>
        <span class="label">+</span>
    </div>
    <div class="min-btn">
        <input type="checkbox" />
        <span class="btn"></span>
        <span class="label">-</span>
    </div>
    <div class="loading">
    </div>

转载于:https://www.cnblogs.com/ricesm/p/5037045.html