css布局实现泰姬陵效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现泰姬陵效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, ::after , ::before { box-sizing: border-box; } body { width: 100%; height: 100vh; margin: 0; position: fixed; --background: skyblue; background: var(--background); /*border: 2px solid black;*/ } .canvas { display: flex; justify-content: flex-start; flex-direction: column; align-items: center; width: 100%; height: 100%; --temple_color: #f5e5d2; --border: #ecdbc6; --darker_border: #dcc4af; /*border: 3px solid red;*/ } .non_ground { flex: 1; display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 0; /*border: 3px solid red;*/ } .building_main_center { display: flex; flex-direction: column-reverse; align-items: center; } .building_center_bottom { background: #f5e5d2; display: flex; /*height: 100px;*/ } .bottom_tile { aspect-ratio: 2/4.5; width: 32px; border-radius: 2px; display: flex; flex-direction: column; } .bottom_upper { width: 100%; aspect-ratio: 6/5; padding: 4px 3px 3px; } .bottom_upper::after { content: ""; display: block; height: 100%; width: 100%; border-radius: 2px; box-shadow: inset 1px 1px 2px 1px var(--darker_border); } .bottom_lower { width: 100%; flex: 1; padding: 2px 3px 0; /*border-top: 2px solid var(--darker_border);*/ display: flex; align-items: flex-end; } .bottom_arc { box-shadow: inset 1px 1px 2px 1px var(--darker_border); width: 100%; height: 100%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; } .building_center_middle_area { display: flex; justify-content: center; column-gap: 50px; } .side_bottom { display: flex; background: var(--temple_color); } .side_minaret, .rear_minaret { display: flex; flex-direction: column-reverse; align-items: center; } .rear_minaret { width: 80px; } .bottom_tile::before { content: ""; width: 100%; height: 10px; box-shadow: inset 0 -2px 2px 0px var(--border); background: var(--temple_color); } .side_segment_1, .side_segment_2, .side_segment_3 { width: 95%; aspect-ratio: 1/1.6; background: var(--temple_color); transform-origin: 50% 100%; transform: perspective(70px) rotateX(2deg); position: relative; display: flex; justify-content: flex-end; flex-direction: column-reverse; align-items: center; } .side_segment_1 { z-index: 3; } .side_segment_2 { width: 85%; z-index: 2; } .side_segment_3 { z-index: 1; aspect-ratio: 1/2.2; width: 75%; } .side_segment_1::before, .side_segment_2::before, .side_segment_3::before, .side_top::before { display: block; width: 120%; height: 16px; background: var(--temple_color); content: ""; position: absolute; top: 0; transform-origin: 50% 100%; transform: scale(1.2) rotateX(-3deg) translateY(-100%); border-radius: 10px / 5px; z-index: 1; box-shadow: 0 5px 0px -1px var(--border), inset 0 1px 0px -1px var(--border); filter: brightness(1.03); } .side_top { width: 60%; aspect-ratio: 1/1.1; /*border-inline: 3px solid var(--border);*/ position: relative; display: flex; justify-content: center; background: var(--temple_color); } .side_top::before { width: 140%; height: 12px; position: absolute; transform: none; } .side_top_dome { border-radius: 50% 50% 0 0 / 100% 100% 0 0; aspect-ratio: 2/1; width: 65%; background: var(--temple_color); position: relative; z-index: 1; } .side_arch { border: 5px solid var(--temple_color); margin-top: 15px; background: var(--background); border-bottom: 0; flex: 1; border-radius: 50% 50% 0 0; } .side_top_peak { display: flex; flex-direction: column-reverse; align-items: center; z-index: 0; height: 50px; --peak_color: #565656; background: var(--peak_color); width: 3px; border-radius: 50% 50% 0 0 / 10% 10% 0 0 ; } .p1, .p2, .p3, .p4 { background: inherit; } .p1 { width: 12px; aspect-ratio: 1/1; transform: translateY(50%); border-radius: 50%; } .p2 { width: 5px; aspect-ratio: 1/1; transform: translateY(110%); border-radius: 50%; } .p3 { width: 10px; aspect-ratio: 1/1; transform: translateY(50%); border-radius: 50% / 60% 60% 40% 40%; } .p4 { width: 8px; aspect-ratio: 1/1.2; transform: translateY(30%); border-radius: 50%; } .p5 { width: 20px; aspect-ratio: 2/1; border-inline: 1px solid var(--peak_color); border-bottom: 3px solid var(--peak_color); border-radius: 0 0 50% 50% / 0 0 90% 90%; } .building_center_main_block { display: flex; align-items: flex-end; justify-content: center; } .building_main_block_hcenter { display: flex; justify-content: center; flex-direction: column-reverse; border-radius: 3px; align-items: center; z-index: 5; } .building_main_block_hcenter_lower { width: 240px; aspect-ratio: 1/1.5; background: var(--darker_border); border: 15px solid var(--temple_color); display: flex; justify-content: center; align-items: flex-end; } .main_gate { width: 100%; height: 100%; margin: 15px 15px -15px; border: 15px solid var(--temple_color); border-bottom: 0; background: var(--border); display: flex; justify-content: center; align-items: flex-end; border-radius: 3px; } .gate_arch { width: 100%; height: 95%; background: var(--darker.........完整代码请登录后点击上方下载按钮下载查看
网友评论0