首页 > 代码库 > CSS:SVG animation
CSS:SVG animation
html{background-color: #28505D;} .planePath {stroke: #D9DADA; stroke-width: .1%;stroke-width: .5%; stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;} .fil1{fill: #D9DADA;} .fil2{fill: #C5C6C6;} .fil4{fill: #9D9E9E;} .fil3{fill: #AEAFB0;}
<svg viewBox="0 0 3387 1270"> <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179"></path> <g id="plane"> <polygon class="fil1" points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 "></polygon> <polygon class="fil2" points="199,0 -141,-10 -163,63 -123,9 "></polygon> <polygon class="fil3" points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 "></polygon> <path class="fil4" d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z"></path> <polygon class="fil1" points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 "></polygon> </g> <!-- Define the motion path animation --> <animateMotion xlink:href="#plane" dur="5s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#planePath"></mpath> </animateMotion> </svg>
CSS:SVG animation
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。