css实现自行车轮廓描线loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现自行车轮廓描线loading加载动画效果代码
代码标签: css 自行车 轮廓 描线 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320)); } body { background-color: var(--bg); color: var(--fg); display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .bike { display: block; margin: auto; width: 16em; height: auto; } .bike__body, .bike__front, .bike__handlebars, .bike__pedals, .bike__pedals-spin, .bike__seat, .bike__spokes, .bike__spokes-spin, .bike__tire { animation: bikeBody 3s ease-in-out infinite; stroke: var(--primary); transition: stroke var(--trans-dur); } .bike__front { animation-name: bikeFront; } .bike__handlebars { animation-name: bikeHandlebars; } .bike__pedals { animation-name: bikePedals; } .bike__pedals-spin { animation-name: bikePedalsSpin; } .bike__seat { animation-name: bikeSeat; } .bike__spokes, .bike__tire { stroke: currentColor; } .bike__spokes { animation-name: bikeSpokes; } .bike__spokes-spin { animation-name: bikeSpokesSpin; } .bike__tire { animation-name: bikeTire; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); } } /* Animations */ @keyframes bikeBody { from { stroke-dashoffset: 79; } 33%, 67% { stroke-dashoffset: 0; } to { stroke-dashoffset: -79; } } @keyframes bikeFront { from { stroke-dashoffset: 19; } 33%, 67% { stroke-dashoffset: 0; } to { stroke-dashoffset: -19; } } @keyframes bikeHandlebars { from { stroke-dashoffset: 10; } 33%, 67% { stroke-dashoffset: 0; } to { stroke-dashoffset: -10; } } @keyframes bikePedals { from { animation-timing-function: ease-in; stroke-dashoffset: -25.133; } 33%, 67% { animation-timing-function: ease-out; stroke-dashoffset: -21.991; } to { stroke-dashoffset: -25.133; } } @keyframes bikePedalsSpin { from { transform: rotate(0.1875turn); } to { transform: rotate(3.1875turn); } } @keyframes bikeSeat { from { stroke-dashoffset: 5; } 33%, 67% { stroke-dashoffset: 0; } to { stroke-dashoffset: -5; } } @keyframes bikeSpokes { from { animation-timing-function: ease-in; stroke-dashoffset: -31.416; } 33%, 67% { animation-timing-function: ease-out; stroke-dashoffset: -23.562; } to { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0