css代碼

h3 {
        font-family: Helvetica;
        font-size: 30px;
        margin-top: 20px;
        color: #333;
        opacity: 0;
    }
    input[type="checkbox"]:checked+ label ~ h3 {
        animation: .6s title ease-in-out;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
    }
    .circle {
        stroke-dasharray: 1194;
        stroke-dashoffset: 1194;
    }
    input[type="checkbox"]:checked + label + svg .circle {
        animation: circle 1s ease-in-out;
        animation-fill-mode: forwards;
    }
    .tick {
        stroke-dasharray: 350;
        stroke-dashoffset: 350;
    }
    input[type="checkbox"]:checked + label+ svg .tick {
        animation: tick .8s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .95s;
    }
    @keyframes circle {
        from {
            stroke-dashoffset: 1194;
        }
        to {
            stroke-dashoffset: 2388;
        }
    }
    @keyframes tick {
        from {
            stroke-dashoffset: 350;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes title {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    label {
        display: inline-block;
        height: 38px;
        width: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #1E9FFF;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }
    #d1 {
        display: flex;
        justify-content: center;
        min-height: 100px;
        flex-direction: column;
    }

寫到這里本來應(yīng)該就結(jié)束了 但是我們在真正實現(xiàn)功能的時候 不太可能用 checkbox切換動畫效果的顯示 一般還是需要按鈕操作動畫效果 下面是jq操作的代碼 其實用jq的.animate()更好一些但是我是小白所以就偷了個懶 (ps:好吧其實是不會)直接用.css()

JavaScript代碼

  $("#btn1").on("click",function () {
       if($(this).text()==="完成"){
           $(".circle").css({'animation':'circle 1s ease-in-out','animation-fill-mode':'forwards'});
           $(".tick").css({'animation':'tick .8s ease-out','animation-fill-mode':'forwards','animation-delay':'.95s'});
           $("h3").css({'animation':'.6s title ease-in-out','animation-fill-mode':'forwards','animation-delay':'1.2s'})
           $(this).text("取消")
       }else{
           $(".circle").css({'animation':'none','animation-fill-mode':'none'});
           $(".tick").css({'animation':'none','animation-fill-mode':'none'});
           $("h3").css({'animation':'none','animation-fill-mode':'none'})
           $(this).text("完成")
       }
   });

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“svg+css或者js怎么制作打鉤的動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!