如何在html

时间：2018-03-08 05:23:51

标签： html css user-interface

enter image description here

我只想使用HTML和CSS创建上面的图像。有人可以帮帮我吗？

1 个答案:

答案 0 :(得分：1)

我确信有更优雅的方法来完成您正在寻找的内容，但可以使用SVG，z-Index，Opacity和Clipping来完成。

运行代码，我认为您会看到它匹配。颜色可能不准确，但它们足够接近以显示出去的地方。你也可以将样式与HTML分开并放入一个CSS文件中，但是我用这种方式构建它的速度更快。

我希望这会有所帮助。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#col1 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 3;
}
#col2 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;
}
#col3 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -2;
}
#col3a {
    opacity: 0.90;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;
}
#col4 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -3;
}
#col4a {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 4;
}
#col5 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -4;
}
#col6 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -5;
}
#col7 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed; 
    display: block;
    z-index: -6;
}
#col8 {
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -7;
}
</style>
</head>
<body>
<div id="col1">
<svg height="1000" width="1000">
  <circle cx="0" cy="0" r="100" fill="#ffffff" />
  <circle cx="0" cy="200" r="100" fill="#ffffff" />
  <circle cx="0" cy="400" r="100" fill="#ffffff" />
  <circle cx="0" cy="600" r="100" fill="#ffffff" />
  <circle cx="0" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col2">
<svg height="1000" width="1000">
  <circle cx="100" cy="100" r="100" fill="#aba31a" />
  <circle cx="100" cy="300" r="100" fill="#aba31a" />
  <circle cx="100" cy="500" r="100" fill="#aba31a" />
  <circle cx="100" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col3">
<svg height="1000" width="1000">
  <circle cx="200" cy="0" r="100" fill="#ffffff" />
  <circle cx="200" cy="200" r="100" fill="#ffffff" />
  <circle cx="200" cy="400" r="100" fill="#ffffff" />
  <circle cx="200" cy="600" r="100" fill="#ffffff" />
  <circle cx="200" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="200" cy="200" r="100" fill="#326e78" />
  <circle cx="200" cy="400" r="100" fill="#326e78" />
  <circle cx="200" cy="600" r="100" fill="#326e78" />
  <circle cx="200" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col4">
<svg height="1000" width="1000">
  <circle cx="300" cy="100" r="100" fill="#aba31a" />
  <circle cx="300" cy="300" r="100" fill="#aba31a" />
  <circle cx="300" cy="500" r="100" fill="#aba31a" />
  <circle cx="300" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip1">
      <circle cx="200" cy="0" r="100" />
      <circle cx="200" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="100" r="100" fill="#ffffff" clip-path="url(#clip1)" />
  <defs>
    <clipPath id="clip2">
      <circle cx="200" cy="200" r="100" />
      <circle cx="200" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="300" r="100" fill="#ffffff" clip-path="url(#clip2)" />
  <defs>
    <clipPath id="clip3">
      <circle cx="200" cy="400" r="100" />
      <circle cx="200" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="500" r="100" fill="#ffffff" clip-path="url(#clip3)" />
  <defs>
    <clipPath id="clip4">
      <circle cx="200" cy="600" r="100" />
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="700" r="100" fill="#ffffff" clip-path="url(#clip4)" />
  <defs>
    <clipPath id="clip5">
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="900" r="100" fill="#ffffff" clip-path="url(#clip5)" />
</svg>
</div>
<div id="col5">
<svg height="1000" width="1000">
  <circle cx="400" cy="0" r="100" fill="#ffffff" />
  <circle cx="400" cy="200" r="100" fill="#ffffff" />
  <circle cx="400" cy="400" r="100" fill="#ffffff" />
  <circle cx="400" cy="600" r="100" fill="#ffffff" />
  <circle cx="400" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="400" cy="200" r="100" fill="#326e78" />
  <circle cx="400" cy="400" r="100" fill="#326e78" />
  <circle cx="400" cy="600" r="100" fill="#326e78" />
  <circle cx="400" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col6">
<svg height="1000" width="1000">
  <circle cx="500" cy="100" r="100" fill="#aba31a" />
  <circle cx="500" cy="300" r="100" fill="#aba31a" />
  <circle cx="500" cy="500" r="100" fill="#aba31a" />
  <circle cx="500" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip6">
      <circle cx="400" cy="0" r="100" />
      <circle cx="400" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="100" r="100" fill="#ffffff" clip-path="url(#clip6)" />
  <defs>
    <clipPath id="clip7">
      <circle cx="400" cy="200" r="100" />
      <circle cx="400" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="300" r="100" fill="#ffffff" clip-path="url(#clip7)" />
  <defs>
    <clipPath id="clip8">
      <circle cx="400" cy="400" r="100" />
      <circle cx="400" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="500" r="100" fill="#ffffff" clip-path="url(#clip8)" />
  <defs>
    <clipPath id="clip9">
      <circle cx="400" cy="600" r="100" />
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="700" r="100" fill="#ffffff" clip-path="url(#clip9)" />
  <defs>
    <clipPath id="clip10">
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="900" r="100" fill="#ffffff" clip-path="url(#clip10)" />
</svg>
</div>
<div id="col7">
<svg height="1000" width="1000">
  <circle cx="600" cy="0" r="100" fill="#ffffff" />
  <circle cx="600" cy="200" r="100" fill="#ffffff" />
  <circle cx="600" cy="400" r="100" fill="#ffffff" />
  <circle cx="600" cy="600" r="100" fill="#ffffff" />
  <circle cx="600" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="600" cy="200" r="100" fill="#326e78" />
  <circle cx="600" cy="400" r="100" fill="#326e78" />
  <circle cx="600" cy="600" r="100" fill="#326e78" />
  <circle cx="600" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col8">
<svg height="1000" width="1000">
  <circle cx="700" cy="100" r="100" fill="#aba31a" />
  <circle cx="700" cy="300" r="100" fill="#aba31a" />
  <circle cx="700" cy="500" r="100" fill="#aba31a" />
  <circle cx="700" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
  <defs>
    <clipPath id="clip11">
      <circle cx="600" cy="0" r="100" />
      <circle cx="600" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="100" r="100" fill="#ffffff" clip-path="url(#clip11)" />
  <defs>
    <clipPath id="clip12">
      <circle cx="600" cy="200" r="100" />
      <circle cx="600" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="300" r="100" fill="#ffffff" clip-path="url(#clip12)" />
  <defs>
    <clipPath id="clip13">
      <circle cx="600" cy="400" r="100" />
      <circle cx="600" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="500" r="100" fill="#ffffff" clip-path="url(#clip13)" />
  <defs>
    <clipPath id="clip14">
      <circle cx="600" cy="600" r="100" />
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="700" r="100" fill="#ffffff" clip-path="url(#clip14)" />
  <defs>
    <clipPath id="clip15">
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="900" r="100" fill="#ffffff" clip-path="url(#clip15)" />
</svg>
</div>  
<div id="col3a">
<svg height="1000" width="1000">
  <circle cx="800" cy="200" r="100" fill="#326e78" />
  <circle cx="800" cy="400" r="100" fill="#326e78" />
  <circle cx="800" cy="600" r="100" fill="#326e78" />
  <circle cx="800" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col1">
<svg height="1000" width="1000">
  <circle cx="900" cy="100" r="100" fill="#ffffff" />
  <circle cx="900" cy="300" r="100" fill="#ffffff" />
  <circle cx="900" cy="500" r="100" fill="#ffffff" />
  <circle cx="900" cy="700" r="100" fill="#ffffff" />
  <circle cx="900" cy="900" r="100" fill="#ffffff" />
</svg>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题