gsap+svg实现键盘方向键驱动的赛车沿着赛道行驶动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现键盘方向键驱动的赛车沿着赛道行驶动画效果代码，按住键盘的方向键驱动你的赛车行驶吧。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
html, body, svg {
width:100%;
height:100%;
margin:0;
padding:0;
font-family: 'Orbitron', sans-serif;
position:absolute;
}
</style>
</head>
<body>
<svg class='gameView' viewBox="0 0 150 150" style="opacity:0" fill="none">
<defs>
<path id="track" d="M88,99c37-33,89-44,125-36s46,36,46,66s36,62,55,71c21,10,40,20,70,9 c30-11,57-8,69,4c13,13,10,50-13,70c-20,17-43,60-46,92c-3,37-34,89-114,84 c-87-5-99-89-95-117c4-28,25-97-7-130s-72-7-98-23S56,127,88,99z"/>
<image id="carImg" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAqCAMAAADvYwfyAAAAYFBMVEX///////////////9HcEz///////8AAAAAAAD///8AAAD////////W1tYAAAD///////8QEBD///8AAAAAAAAAAAAxMTEAAAAEBAQICAjf39+1tbWnp6d7e3t+fn4AAACmOMjAAAAAH3RSTlM+N05aAIFFzNZl7y4YD+VrI1N2p/eBNrtpmv3vvuqRVJRC9AAABPZJREFUeAGd14mioyoMBmCWEwoCiiva9f3f8iap9Wacff6e/ehnGqOl6uu3USl//UOknI/ILVJZfinkz34/k3MsOS9936/rOve4YUqpaKtLSSmWeEQrZ2ywxjkXYyllmeeVM9NeP5ATGOuU2vcuidxi7JIAYJm3DXfvOQuHjxsxRav0Se7XPp/llO+32y0GhcFqjLHWKhPqy499iakffTNNU9M0bYsfR7y/1B6c0kprHbWzOsVv5XSlPIHNELqBArC9vG8bX9ekVOznsV4uaFFqreOIzwSzGK2pHGNjom4uScjP6/V2eyQYmOy6LmAsLK+WGd80ftwswGCUZsaEAT4JkaKx/7pkPPxYxy3vckH4QXCQgQ7LfcuYpikQQAY3P3DjNMZZ/Nmkdaw1s5zv19szAVClUp6p5EOuMFjjlHpXTXUb6P04r/j0i7JAMcoZwKRxZDleb5EObHey4w8YfOOFPIMl+YhDZH5RJjynvmIP+s5qZwziw5hRzumJPzIrA/3USnlh2R0u1/zCacF/4sBgplcF9x53SCSXgPUGUS8Gv8L4ErBvC1hDNZ9l6hinVv/qIWplbOdiQdnZ7qN+pgIDjpvBIfjiPrJmWf0ve84F01RQWjsTQiFZIUkhllBjuJ7U0HVwyBWOmvVJphnHLXHYWz9YnpFANWdNIlXMKIWeK6xHm0luRuhYdp9myJrpg0I9I9kMOn2ppIcd3s/P+1qAbfJSniHIPhMuavZUM7VjIVmZQaFcFMvBOkY5JI8TwUK2ss/nmnd5Wll2wZHsSO4kzEetKHvMLq9ynB3bh8x95kwzKJZNyiqSTLCWMfbSsMw55DetxRk8dWMER3WxXAzVbFiO7+BP1kj5XDPBos9HyTR2Z5lrjvxg2nLNl7P803ne5fYCBgl3kmXMD2Us+qBJXneZx1nIRsp7O/iD5K42BytmQ7bjkDFHN0hWpnMoR5K5aDl1BnA2uNFyns/X4C7jg2qWZ5Dl99SFTxM/8vjtlbKhLPuMETVf9uBmDmt2XHNRXUc0l7SPlbwGPQeLGax1p27MomY5z2ZQKCeNKtN840DeON7rG7mtwzF2mmEh04bH1c1yp1HOJB83O+LZ5xu//1++GDjfN04yxrcRdKQ+60T354HAA2c9WLqLStnrt+yUPndDtNlDQNmZEEkuDsAid/iMg9nv/H6ni+wGygrlTci1XuprP4HW8p3/606vg+GUgYZDyvmQKSTbXaYQfJmmdzNccJHlfH1E4Lpl5dToXZaXN1V8TN34wjVZg5kw+Cq+vGGzv8J+ldv1sS0BkBM4WLGQOS5Cvpp23EClmluPBY+4pOz3it0AanyvkRKtvbYIjMqVjD+vZHgmDcUaS5WVqOwg1mHYCfwh1ZlkzP1KtgbbDZSuYxn8tMu0nKjw8+AxVUS2Q12nfqxj3mVsNSUDdc9anA7yoTSTR7W9bGtS1hVcR2NmzNovOZWoTccnyJKrVVn6eRvR7cX6Oab7/XYPTqt9yWqMi5Dbpm59iiX1c/XNJENraZ74BbpgeHFc8kKLXLnKJRosgOPbPn0UTNSgkwUw/VYp43fhZ5CALi9rsCqjtMrfv0/BwpZ3+nVJmBIVgC4Rf0qlpEQfFOqo289bF7Ae4xSWgxtmqlfKR3743gqPmMS/Eu6Pyfmzy0wFZUwvXZJ/G0XKz5PxY39gpPz7uPL1D/kPQP94mKNBXUgAAAAASUVORK5CYII="/>
</defs>
<g class="pov1">
<use href="#track" stroke="#C2B280" stroke-width="45" />
<use href="#track" stroke="#111" stroke-width="29" />
<use href="#track" stroke="#fff" stroke-dasharray="3.5 7.1" />
<g class="car1Group">
<g class="car1">
<path fill="#f0a" d="M12,2c0,0,6.5-1,9.8,0S40,2,49,2.5S58.8,3,61.9,3S67,1,74,2s11,5,13,6s3,23,1,25s-9,7-17,7s-3-1-9-1s-17,1-25,0s-14,0-17,0s-9,1-14-4S1,23.7,1,20.9S1,11,4,8S10,2,12,2z"/>
<use href="#carImg"/>
</g>
</g>
<g class="car2Group">
<g class="car2">
<path fill="#0af" d="M12,2c0,0,6.5-1,9.8,0S40,2,49,2.5S58.8,3,61.9,3S67,1,74,2s11,5,13,6s3,23,1,25s-9,7-17,7s-3-1-9-1s-17,1-25,0s-14,0-17,0s-9,1-14-4S1,23.7,1,20.9S1,11,4,8S10,2,12,2z"/>
<use href="#carImg"/>
</g>
</g>
</g>
</svg>
<svg.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0