自适应高塔效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Responsive Pagoda</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } body { background: /* land */ linear-gradient(0deg,#113f66 1.5em,#113f6600 1.5em), /* snow part of moutain */ radial-gradient(100% 100% at center,#e1ecf4 49%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 12em) / 14em 8em, radial-gradient(100% 200% at 50% 150%,#e1ecf4 49.75%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 11em) / 55.5em 16em, radial-gradient(100% 200% at 50% 0%,#e1ecf4 49.75%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 8em) / 48em 3em, /* mountain */ radial-gradient(100% 100% at center,#5d6d7e 49.75%,#5d6d7e00 50%) calc(50% - 10em) calc(100% + 61em) / 80em 80em, /* clouds */ radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 26em) calc(100% - 26em) / 12em 2em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 12em) calc(100% - 23em) / 12em 2em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 6em) calc(100% - 24em) / 12em 2em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 18em) calc(100% - 12em) / 18em 6em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 24em) calc(100% - 15em) / 18em 6em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 34em) calc(100% - 12em) / 18em 6em, radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 26em) calc(100% - 10em) / 18em 6em, /* sun */ radial-gradient(100% 100% at center,#facd15 49.5%,#facd1500 50%) calc(50% - 18em) calc(100% - 22em) / 12em 12em, /* sky */ linear-gradient(0deg,#86c1e9 20em,#7fb6db 20em 40em,#77abce 40em); background-repeat: no-repeat; font-size: 10px; height: 100vh; } main { position: fixed; bottom: 0; left: 50%; width: 20em; height: 10em; transform: translateX(-50%); } /* Layers */ .layer { position: absolute; } .layer > div { margin: auto; transform-origin: 50% 100%; } .layer__roof { background: linear-gradient(90deg,#37678d 50%,#10406f 50%); clip-path: polygon(20% 0%,80% 0%,100% 100%,0% 100%); -webkit-clip-path: polygon(20% 0%,80% 0%,100% 100%,0% 100%); width: 20em; height: 3em; transition: clip-path0.15s ease-out, -webkit-clip-path 0.15s ease-out; } .layer__middle { background: /* side */ linear-gradient(90deg,#0000 50%,#0004 50%), /* front left */ linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 0.2em 0.7em / 1.3em 0.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 0.2em 1.7em / 1.3em 1.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 0.2em 3.7em / 1.3em 1.7em, /* front middle */ linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 2em 0.7em / 1.4em 0.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 1.8em 1.7em / 1.8em 4em, /* front right */ linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 3.9em 0.7em / 1.4em 0.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 3.9em 1.7em / 1.4em 1.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 3.9em 3.7em / 1.4em 1.7em, /* side left */ linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 5.7em 0.7em / 2.4em 0.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 5.7em 1.7em / 2.4em 1.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 5.7em 3.7em / 2.4em 1.7em, /* side right */ linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 8.4em 0.7em / 2.4em 0.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 8.4em 1.7em / 2.4em 1.7em, linear-gradient(#bf2f2f 0.1em,#fff 0.1em) 8.4em 3.7em / 2.4em 1.7em, /* outer */ linear-gradient(#bf2f2f 0.5em,#fa3e3e 0.5em); background-repeat: no-repeat; width: 11em; height: 6em; } .layer__base { background: linear-gradient(90deg,#0000 50%,#0003 50%), #ee9366; width: 12em; height: 1em; } .layer:first-of-type .layer__base { background: linear-gradient(90deg,#0004 25%,#0002 25%) 2em 0 / 2em 0.5em, linear-gradient(90deg,#0000 50%,#0003 50%), #ee9366; background-repeat: no-repeat; } /* Layer states */ .layer--show .layer__roof { animation: popOutA 0.15s ease-out forwards; animation-delay: 0.45s; transform: scale(0.55,0); } .layer--show .layer__middle, .layer--show ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0