svg描邊動畫收集
阿新 • • 發佈：2021-06-28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>doc</title> <style> #line{ animation: lineScroll 2s linear infinite; }@keyframes lineScroll{ 0%{ stroke-dashoffset: 300; } 100%{ stroke-dashoffset: 0; } } #circle{ transition: all 2s; stroke-dasharray:314,314; stroke-dashoffset:314; }svg:hover #circle{ stroke-dashoffset:0; } #rect { stroke-width: 6px; fill: #fff; stroke: red; stroke-dasharray: 20; animation: path-animation 5s linear infinite; } @keyframes path-animation{ from { stroke-dashoffset: 100%; } to { stroke-dashoffset: 0%; } } .star-path { fill:none; stroke-width:10; stroke: #d3dce6; stroke-linejoin:round; stroke-linecap:round; } .star-fill { fill:none; stroke-width:10; stroke: #ff7700; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1340; stroke-dashoffset:0; animation: starFill 2s ease-out infinite; } @keyframes starFill { 0% { stroke-dashoffset:1340; } 100% { stroke-dashoffset:0; } } </style> </head> <body> <h1>svg</h1> <!-- 直線滾出 --> <svg > <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/> </svg> <!-- 圓形路徑滾出 --> <svg width="200" height="200" viewBox="0 0 200 200"> <circle id="circle" cx="100" cy="80" r="50" fill="gray" stroke-width="5" stroke="green" /> </svg> <!-- 矩形虛線框邊框滾動動畫 --> <svg height="100" width="300"> <rect id="rect" height="100" width="300" /> </svg> <!-- 豎直軌跡文字動畫 --> <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">人 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="5s" rotate="0" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> <!-- 五角星全繪 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500"> <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-path"></polygon> <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-fill"></polygon> </svg> <!-- 橫向文字迴圈滾動 --> <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei,sans-serif" font-size="15" y="50" x="200" fill="#5F9F9F">內容2 <animate attributeName="x" from="100%" to="-200" begin="0.5s" dur="10s" repeatCount="indefinite"></animate> </text> </g> </svg> <!-- 小球折線運動 --> <svg width="500" height="500"> <path d="M100 150 L200 50 L300 150 L400 50 Z" stroke="#ccc" stroke-width="2" fill="none" /> <circle r="20" x="150" y="0" style="fill:#336622;"> <animateMotion dur="3s" repeatCount="indefinite" rotate="auto" path="M100 150 L200 50 L300 150 L400 50 Z" /> </circle> </svg> <!-- 小球曲線閉合運動 --> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points --> <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath" /> <circle cx="10" cy="110" r="3" fill="lightgrey" /> <circle cx="110" cy="10" r="3" fill="lightgrey" /> <!-- Red circle which will be moved along the motion path. --> <circle cx="" cy="" r="5" fill="red"> <!-- Define the motion path animation --> <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath" /> </animateMotion> </circle> </svg> <!-- 圖片曲線運動 --> <svg width="500" height="350" viewBox="0 0 500 350"> <!--運動的路徑軌跡--> <path style="fill:none;" stroke="#000" id="motionPath" d="M0.038,0c0,0-2.25,26.75,27.75,42.25c11.501,5.942,36.167,25.667,42.5,29.583 c5.465,3.38,37.333,22.667-11.125,55.917" /> <!--運動的圖片--> <image id="car" transform="translate(-72,-72)" style="overflow:visible;" width="144px" height="144px" xlink:href="images/light.png"> <animate attributeName="opacity" values="0;1;1;1;1;0" dur="3s" repeatCount="indefinite" /> </image> <!--運動的相關引數 1、href連結到圖片 mpath連結到路徑--> <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite"> <mpath xlink:href="#motionPath" /> </animateMotion> </svg> </body> </html>