css实现小红车沿赛道行驶动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现小红车沿赛道行驶动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --road: #757c8a; --grass: #80b34d; --island: #b3994d; --lines: #faf0d1; } @property --x { inherits: false; initial-value: -22.5; syntax: '<number>'; } @property --y { inherits: false; initial-value: 0; syntax: '<number>'; } @property --r { inherits: false; initial-value: 0deg; syntax: '<angle>'; } body { min-height: 100vh; display: grid; place-items: center; background: var(--grass); } .car { -webkit-animation: journey 5s infinite linear; animation: journey 5s infinite linear; transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin)) rotate(var(--r)); width: 3vmin; -o-object-fit: cover; object-fit: cover; } .road { height: 50vmin; width: 50vmin; border-radius: 12.5%; border: 5vmin solid var(--road); background: var(--road); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .road:before { content: ''; position: absolute; height: 44vmin; width: 44vmin; border-radius: 11%; border: 0.5vmin dashed var(--lines); top: 50%; left: 50%; transform: translate(-50%, -50%); } .road:after { content: ''; position: absolute; height: 40vmin; width: 40vmin; background: var(--island); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10%; } @-webkit-keyframes journey { 0% { --x: -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0