SVG奥林匹克五环动画

【HTML5+CSS3】

下载

新闻

文章

SVG奥林匹克五环动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SVG奥林匹克五环动画</title>
    <style type="text/css">
    body{background:#ccc}
    button {
        position: absolute;
        top: 10px;
        right: 5px;
    }
    #mySvg{width:550px;height:300px}
    path {
        fill: transparent;
        stroke-width: 12;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform-origin:center center;
        transition:all .5s;
    }
    path:hover {
        opacity:.8;
        stroke-width:14;
        cursor:pointer;
        animation:flip 1s ease-in;
    }
    @keyframes flip {
        0% {transform:translateX(0%)}
        15% {transform:translateX(-10%) rotate(-5deg)}
        30% {transform:translateX(8%) rotate(3deg)}
        45% {transform:translateX(-6%) rotate(-3deg)}
        60% {transform:translateX(4%) rotate(2deg)}
        75% {transform:translateX(-2%) rotate(-1deg)}
        100% {transform:translateX(0%)}
    }
    .blue {stroke: #0885C2;}
    .black {stroke: #292B2A;}
    .red {stroke: #ED334C;}
    .yellow {stroke: #FBB132;}
    .green {stroke: #1C8b3C}
    </style>
</head>
<body>
<button onclick="rerun();">Again!</button>
<svg id="mySvg"  version="1.1" viewBox="0 0 550 300">
    <path id="i0" class="blue"  d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i1" class="green" d="M 365, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i2" class="black" d="M 275, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 "/>
    <path id="i3" class="red" d="M 450, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
    <path id="i4" class="yellow" d="M 187.5, 175 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/>
</svg>
<script type="text/javascript">
    var current_frame, total_frames, path, length, handle;
    var mysvg=document.getElementById('mySvg');
    var pathObj=document.getElementsByTagName('path');
    var init = function() {
        current_frame = 0;
        total_frames = 60;
        path = new Array();
        length = new Array();
        for(var i=0; i<pathObj.length;i++){
            path[i] = document.getElementById('i'+i);
            l = path[i].getTotalLength();
            length[i] = l;
            path[i].style.strokeDasharray = l + ' ' + l;
            path[i].style.strokeDashoffset = l;
        }
        handle = 0;
    };
    var draw = function() {
        var progress = current_frame/total_frames;
        if (progress > 1) {
            window.cancelAnimationFrame(handle);
        } else {
            current_frame++;
            for(var j=0; j<path.length;j++){
                path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
            }
            handle = window.requestAnimationFrame(draw);
        }
    };
    init();
    draw();
    function rerun() {
        var old = document.getElementById('mySvg');
        old.parentNode.removeChild(old);
        document.getElementsByTagName('body')[0].appendChild(mysvg);
        init();
        draw();
    }
</script>
</body>
</html>