svg动画

html:

<div class="svgwrap">
                        <svg width="100%" height="100%" viewBox="0 0 440 440">
                            <defs>
                                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
                                    <stop offset="0%" stop-color="#213951"></stop>
                                    <stop offset="100%" stop-color="#237879"></stop>
                                </linearGradient>
                                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
                                    <stop offset="0%" stop-color="#33adf6"></stop>
                                    <stop offset="100%" stop-color="#0af5df"></stop>
                                </linearGradient>
                            </defs>
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none"></circle>//背景圆
                            <circle id="circle2" cx="220" cy="220" r="170"（定义圆的大小） stroke-width（圆形宽度厚度）="50" stroke="url('#gradient2')" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray(虚线间隔)="0 1069"></circle>
                        </svg>
                    </div>

css:

.svgwrap{
                    width: 5.3rem;
                    height: 5.3rem;
                    margin: auto;
                    margin-top: 0.1rem;
                    transform: rotateZ(155deg);
                    -webkit-transform: rotateZ(155deg);
                    circle {
                        -webkit-transition: stroke-dasharray .5s;
                        transition: stroke-dasharray .5s;
                    }
                }

js:

methods:{

           slideChange: function(){
                        if(this.activeIndex == 8){这个代表圆形刚开始的动画的数字
                            document.getElementById("circle2").style.strokeDasharray = "0 1069";
                            setTimeout(function(){
                                document.getElementById("circle2").style.strokeDasharray = "650 1069";
                            },1500)
                        }}}

 

}

 

转载于:https://my.oschina.net/u/3676320/blog/1607913