自适应高塔效果
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0