纯css布局实现一辆跑车效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一辆跑车效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #002233; margin: 0; overflow: hidden; } :root { --car-height: 10vh; --gradient-size: 40px; --shine-width: calc(var(--gradient-size) + 5px); --shine-height: 80%; --color: #8c0000; --color2: rgba(221,221,221,1); animation: shine 0.5s linear infinite; } ul { list-style-type: none; } #car-container { height: calc(var(--car-height) * 3); display: flex; justify-content: flex-start; align-items: center; } #center-lines-container { width: calc(var(--car-height) * 6); height: 1%; position: absolute; left: calc(var(--car-height) * -2.2); top: 50%; display: flex; justify-content: space-between; z-index: 5; padding: 0; } .center-line { height: 100%; background-color: white; filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.6)); } #center-line1 { width: calc(var(--car-height) * 1.2); border-radius: 50%; } #center-line2 { width: calc(var(--car-height) * 2.6); border-radius: 85% 15% 10% 90% / 0% 0% 100% 100%; } .car-front { width: calc(var(--car-height) * 3); height: 100%; background-color: var(--color); border-radius: 30% 70% 70% 30% / 50% 5% 5% 50%; box-shadow: inset 41px 0 20px -6px rgba(0, 0, 0, 0.74), inset -38px 31px 34px 9px rgba(255, 255, 255, 0.25), inset -28px -42px 20px -6px rgba(255, 255, 255, 0.6); } .car-center { width: calc(var(--car-height) * 2.5); height: 92%; position: relative; left: -2.5px; background-color: var(--color); box-shadow: inset 35px 1px 21px -3px rgba(255, 255, 255, 0.6), inset -30px 0 10px 0px rgba(0, 0, 0, 0.1); } .car-back { width: calc(var(--car-height) * 2); height: 105%; position: relative; left: -5px; background-color: var(--color); border-radius: 80% 40% 40% 80% / 10% 50% 50% 10%; box-shadow: inset -30px -1px 25px 14px rgba(0, 0, 0, 0.45); } .car-hood { width: 123%; height: 87%; top: 7%; background-color: var(--color); border-radius: 100% 0 0 100% / 45% 50% 50% 45%; position: relative; z-index: 2; box-shadow: inset 16px 0 37px 0 #000000, inset -4px 15px 37px -17px #000000, inset -5px -50px 37px 30px rgba(255, 255, 255, 0.6); } .car-windshield-container { width: 100%; height: 75%; position: relative; top: -75%; left: 45%; z-index: 4; } .car-windshield-1 { width: 50%; height: 100%; background-color: black; border-radius: 100% 0 0 100% / 45% 50% 50% 45%; position: relative; top: 0; } .car-windshield-2 { width: 40%; height: 100%; background-color: black; border-radius: 15% 100% 100% 15% / 50% 30% 30% 50%; position: relative; top: -100%; left: 40%; } .roof-container { width: calc(var(--car-height) * 3.45); height: 95%; position: relative; top: 2.5%; left: calc(var(--car-height) / 3); z-index: 3; padding: 0; } .car-roof-left { height: 50%; margin: 2px 0 0 0; position: relative; border-radius: 0 100% 100% 0 / 0 75% 0 0; background-color: var(--color); box-shadow: inset -20px 0px 20px 0 #000000, 15px 0px 20px 0 #000000, inset -50px -32px 37px 50px rgba(0, 0, 0, 0.38), inset 41px -7px 22px 1px rgba(255, 255, 255, 0.38); } .car-roof-center { height: 60%; width: 102%; position: relative; top: -30%; z-index: 4; border-radius: 0 100% 100% 0 / 0 25% 25% 0; background: linear-gradient(30deg, var(--color2) 0, var(--color) 40%, var(--color) 100%); box-shadow: inset 90px -30px 50px -30px rgba(255, 255, 255, 0.65), inset -50px 26px 50px -16px rgba(0, 0, 0, 0.6), 0px 2px 0px 0px rgba(0, 0, 0, 0.8), 0px -1px 0px 0px rgba(255, 255, 255, 0.8); } .car-roof-right { height: 40%; position: relative; top: -50.5%; border-radius: 0 100% 100% 0 / 0 0 75% 0; background-color: var(--color); box-shadow: inset -20px 0px 24px 0 #000000, inset -45px 50px 40px -8px rgba(0, 0, 0, 0.9), inset 50px -40px 10px 15px rgba(255, 255, 255, 0.5), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.8); } #windows-container { width: 100%; height: 95%; display: flex; flex-direction: column; justify-content: space-between; position: relative; top: -92.5%; left: 32.5%; z-index: 5; padding: 5% 5%; box-sizing: border-box; } .window { width: 80%; height: 15%; background-color: black; } .roof-window { width: 40%; height: 25%; position: relative; left: 12.5%; border-radius: 7.5px; } #window-left { border-radius: 50% 50% 60% 40% / 30% 30% 70% 70%; transform: rotate(2deg); box-shadow: 1px 1px 0 1px rgba(255, 255, 255, 0.7); } #window-roof-left { transform: rotate(1deg); } #window-roof-right { tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0