css绘制一个悉尼歌剧院效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个悉尼歌剧院效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { width: 100%; height: 100vh; margin: 0; position: fixed; } .canvas { width: 100%; height: 100%; display: flex; flex-direction: column; } .water { background: dodgerblue; height: 150px; z-index: 1; } .sydney_opera_house { background: skyblue; display: flex; flex: 1; flex-direction: column-reverse; align-items: center; --body-background: #fffaf5; } .base { border-bottom: 5px solid #be9f83; height: 25px; width: 1200px; background: var(--body-background); border-radius: 3px; box-shadow: 0px -1px 1px #00000022; position: relative; z-index: 2; } .body { display: flex; justify-content: center; align-items: flex-end; filter: drop-shadow(0 -1px #b39f83) drop-shadow(0 -5px var(--body-background)); position: relative; z-index: 1; } .body_1 { height: 90px; width: 60px; background: var(--body-background); } .body_3 { height: 110px; width: 60px; background: var(--body-background); } .body_2 { height: 90px; width: 40px; background: var(--body-background); transform-origin: 0% 100%; transform: scaleX(0.93) perspective(100px) rotateY(-27deg); } .body_4 { height: 110px; width: 100px; background: var(--body-background); /*background: red;*/ transform-origin: 0% 100%; transform: scaleX(1.65) perspective(100px) rotateY(27deg); } .body_5 { height: 75px; width: 60px; background: var(--body-background); } .body_6 { height: 75px; width: 60px; background: var(--body-background); transform-origin: 0% 100%; transform: scaleX(1.4) perspective(100px) rotateY(25deg); } .body_7 { height: 60px; width: 540px; background: var(--body-background); } .body_8 { height: 60px; width: 80px; background: var(--body-background); transform-origin: 0% 100%; transform: scaleX(1.78) perspective(100px) rotateY(35deg); } .top { position: relative; z-index: 0; height: 500px; width: 1000px; } .top_1 { border-radius: 50%; width: 210px; aspect-ratio: 3/1.2; /*background: #66606a;*/ background: #d3d3d3; position: absolute; bottom: -50px; left: -20px; z-index: -9; } .top_2 { background: gray; position: absolute; width: 50px; aspect-ratio: 1/1; transform: rotate(20deg) skew(-20deg); z-index: -10; bottom: -3px; left: 35px; } .top_3 { background: gray; position: absolute; width: 50px; aspect-ratio: 1/1; transform: skewY(20deg); z-index: -10; bottom: 25px; left: 53px; } .top_4 { position: absolute; width: 453px; height: 229px; filter: drop-shadow(-1px 2px black); top: 300px; left: -230px; z-index: -8; } .top_4::before { content: ""; display: block; background: white; width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(40% 0, 100% 0, 100% 100%, 75% 100%, 68.5% 70%, 62.5% 50%, 52.5% 25%); } .top_5 { position: absolute; width: 384px; height: 305px; top: 320px; left: 130px; z-index: -7; } .top_5::before { content: ""; display: block; background: #f1f1f1; /*background: red;*/ width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(17% 0%, 17% 20%, 18% 30%, 20% 40%, 22% 45%, 40% 80%, 0% 60%, 0% 0%); } .top_6 { position: absolute; width: 384px; height: 305px; top: 320px; left: 130px; z-index: -8; border-radius: 50%; background: #faf8f8; clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%); } .top_7 { position: absolute; width: 453px; height: 229px; /*filter: drop-shadow(-1px 1px black);*/ top: 300px; left: -80px; z-index: -7; transform: scale(1.6) rotate(12deg); } .top_7::before { content: ""; display: block; background: white; width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(40% 0, 90% 0, 79% 100%, 68.5% 70%, 62.5% 50%, 52.5% 25%); } .top_8 { z-index: -6; position: absolute; height: 280px; width: 140px; background: #faf8f8; clip-path: polygon(45% 0%, 100% 100%, 0% 100%); top: 280px; left: 260px; } .top_9 { position: absolute; width: 453px; height: 229px; /*filter: drop-shadow(-1px 1px black);*/ top: 225px; left: 60px; z-index: -7; transform: scale(1.2, 1.7) rotate(12deg); } .top_9::before { content: ""; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0