如何使用SVG生成超酷的頁面預加載素描動畫效果_html/css_WEB-ITnose

stroke-dasharray = "100 10" stroke-dashoffset = "0"

 /*定義keyframe動畫*/ /* 添加動畫到path元素 */ .path{ stroke-dasharray: 265.07; stroke-dashoffset: 265.07; animation: dash 3s linear infinite; /* 支持chrome */ -webkit-animation: dash 3s linear infinite; } @keyframes dash{ from{ stroke-dashoffset: 265.07; /* 這里是svg圖形中素描線長度，可以使用js獲取 */ } to{ stroke-dashoffset: 0; } } /* 支持chrome瀏覽器 */ @-webkit-keyframes dash{ from{ stroke-dashoffset: 265.07; /* 這里是svg圖形中素描線長度，可以使用js獲取 */ } to{ stroke-dashoffset: 0; } }

 /*定義相關(guān)Javascript*/ var current_frame, //定義當前幀 total_frames, //定義全部幀數(shù) path, //定義svg中的唯一path元素 length, //定義path所生成的素描長度 handle; //定義javascript動畫句柄 path = document.getElementById('path'), length = path.getTotalLength(); //定義初始化方法 var init = function(){ current_frame = 0; total_frames = 160; path.style.strokeDasharray = length + ' ' + length; //定義dasharray path.style.strokeDashoffset = length; //定義dashoffset handle = 0; } //定義實際的動畫繪制方法 var draw = function(){ var progress = current_frame/total_frames; if(progress>1){ //這里定義完成動畫 window.cancelAnimationFrame(handle); }else{//否則使用reqeuestAnimationFrame來生成動畫 current_frame++; path.style.strokeDashoffset = Math.floor(length*(1 - progress)); handle = window.requestAnimationFrame(draw); } } //定義一個重新運行方法 var rerun = function(){ init(); draw(); } //頁面加載即運行 rerun();