div+css实现人躺下举重健身运动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现人躺下举重健身运动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { background: #e3edf7; font-family: sans-serif; } .container { position: relative; margin: 20px auto; border-radius: 20px; background: #435175; width: 800px; height: 600px; } .man { position: absolute; top: 40%; left: 25%; width: 55%; height: 45%; z-index: 3; } .man .legs { position: absolute; width: 20%; height: 64%; bottom: 4%; } .man .legs .leg { position: absolute; width: 20%; height: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; } .man .legs .leg::after { content: ""; background: #53313e; position: absolute; width: 100%; height: 5%; bottom: 0; } .man .legs .leg::before { content: ""; background: #53313e; position: absolute; width: 50%; height: 5%; bottom: 3px; left: -12%; border-radius: 50%; } .man .legs .one { background: #ffaf72; left: 20%; z-index: 3; } .man .legs .two { background: #f78d5c; left: 10%; z-index: 2; transform: rotate(10deg); /* transform-origin: bottom; */ } .man .legs .thy { z-index: 2; position: absolute; height: 12%; width: 120%; left: 24%; background: #649740; } .man .legs .thy::after { content: ""; position: absolute; border-top-left-radius: 40%; border-bottom-left-radius: 40%; top: -70%; height: 240%; width: 25%; right: -20%; background-color: #649740; } .man .main-parts { position: absolute; left: 33%; width: 40%; height: 30%; top: 15%; } .man .main-parts .upper { position: absolute; height: 30%; width: 48%; bottom: 36%; background: #e75a46; z-index: 1; transform: rotate(-5deg); } .man .main-parts .upper .above { position: absolute; right: 0; background: #e75a46; width: 150%; height: 331%; border-radius: 50%; right: -104%; top: -92%; } .man .main-parts .lower { position: absolute; height: 40%; width: 100%; bottom: 0%; background: #cf4444; z-index: 2; } .man .main-parts .lower::after { content: ""; position: absolute; height: 201%; width: 56%; right: 0; top: -99%; border-radius: 100%; background: #cf4444; } .man .hand { position: absolute; right: 28%; height: 40%; width: 9%; border-radius: 20px; background: #ffaf72; z-index: 5; top: 12%; animation: animate-hand 2s infinite; } .man .weight { position: absolute; height: 30%; width: 18%; border-radius: 50%; border: 4px solid black; left: 57%; top: -10%; background: #e75a46; z-index: 10; animation: animate-hand 2s infinite; } .man .weight:after { content: ""; background-color: #cf4444; position: absolute; width: 60%; height: 60%; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .man .weight:before { content: ""; background-color: #5aada7; position: absolute; width: 20%; height: 20%; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } @keyframes animate-hand { 50% { transform: translateY(-40px); } } .man .arm { position: absolute; right: 28%; width: 10%; height: 10%; z-index: 5; top: 88px; background: #f78d5c; border-radius: 30px 5px 5px 30px; } .man .neck { position: absolute; left: 73%; width: 20%; height: 12%; background: #f78d5c; top: 32%; overflow: hidden; } .man .neck .head { position: absolute; right: 0; bottom: -8%; width: 69%; height: 166%; border-radius: 50%; background: #ffaf72; } .man .nose { width: 10%; height: 10%; position: absolute; right: 5%; top: 21%; display: flex; justify-content: space-evenly; } .man .nose div { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0