js+css实现滑块拖动小人跑步运动动画效果代码
代码语言:html
所属分类:拖放
代码描述:js+css实现滑块拖动小人跑步运动动画效果代码
代码标签: js css 滑块 拖动 小人 跑步 运动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { display: flex; justify-content: center; background: #fffdff; margin: 0; font-family:'poppins', sans-serif; overflow: hidden; } .footer{ position: absolute; bottom: 0; right: 0; font-family: monospace; color: #888; padding: 10px; font-size: 12px; } .footer a { color: #888; } :root { --_size: min(400px, min(84vw, 64vh)); } .morph-container, .morph-container * { transition: all 0.2s ease-out; } .morph-container * { background: #000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: fit-content; } .morph-container { position: absolute; left: 0; right: 0; top: 0; bottom: 10%; margin: auto; width: 300px; height: 500px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 480px), screen and (max-height: 600px) { .morph-container { scale: 0.7; } } @media screen and (max-width: 400px), screen and (max-height: 480px) { .morph-container { scale: 0.5; } } .morph-head { width: 56px; height: 56px; border-radius: 100px; translate: 0% -175%; } .morph-body { width: 50px; height: 130px; border-radius: 100px; } .l-arm, .r-arm { top: 0; bottom: unset; } .l-arm .upper-arm{ width: 27px; height: 92px; border-radius: 100px; transform-origin: 50% 12%; translate: -50% 54%; } .l-arm .lower-arm{ width: 24px; height: 75px; border-radius: 100px; transform-origin: 50% 12%; translate: -10% 86%; /* rotate: -75deg; */ } .r-arm .upper-arm{ width: 27px; height: 60px; border-radius: 100px; transform-origin: 50% -60%; translate: -40% 135%; /* rotate: -63deg; */ } .r-arm .lower-arm{ width: 24px; height: 68px; border-radius: 100px; transform-origin: 50% 12%; translate: -10% 67%; /* rotate: -88deg; */ } .morph-legs .l-leg{ width: 30px; height: 164px; border-radius: 100px; transform-origin: 50% 0%; translate: -50% 94%; } .morph-legs .r-leg .upper-leg{ width: 30px; height: 90px; border-radius: 100px; transform-origin: 50% 0%; translate: -50% 105%; /* rotate: -95deg; */ } .morph-legs .r-leg .upper-leg .lower-leg{ width: 25px; height: 100px; border-radius: 100px; transform-origin: 50% 0%; translate: 10% 85%; /* rotate: 119deg; */ } .test::after { /* --left: 50%; --up: -60%; */ position: absolute; top: var(--up); left: var(--left); width: 5px; height: 5px; content: ''; background-color: rgb(30, 255, 0); border-radius: 50%; transform: translate(-50%, -50%); } .slider { position: absolute; bottom: 0; } input[type=range] { position: absolute; left: 0; right: 0; bottom: 10%; margin: auto; width: var(--_size); height: fit-content; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { background: #dddddd22; box-shadow: 0 0 2px 2px #bbb8, 0 0 0px 1px #bbb8, inset 0 0 4px 1px #f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0