CSS-二七纪念塔

这次带来的效果是大郑州的标志性建筑之一二七纪念塔。其实CSS不适合做这样复杂的建筑模型，性能上会差很多。

老规矩，先看效果：

需求拆分：

这个效果主要可以分为这几个部分

1、塔身部分

2、塔顶部分

3、五角星

4、塔基部分

首先分析塔身部分，对称的双结构11层塔。

只要完成其中一层，就可以复制出塔身部分。

每一层都是六面体塔身，所以塔身部分，最小重复粒子是一个墙面。

为了尽量减少dom数量，我打算使用一个div画出一组墙。

1）墙体部分，一个带背景色的div

2）窗户部分使用before：

1.使用border完成窗户边框

2.顶部和底部大约20%的区域使用线性渐变画出来【浅-深-浅】的渐变颜色

3.中间部分50%区域使用线性渐变画出【浅-深-浅-深-浅】的渐变颜色

4.三个渐变直接的空隙，我们给元素加上深色背景，填充类似边框效果

主要使用到linear-gradient属性

.wall {
  position: absolute;
  width: 100px;
  height: 80px;
  background: #bdafa2;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .2);
  transform-style: preserve-3d;
}
.wall::before {
  position: absolute;
  top: 30px;
  width: 30px;
  height: 40px;
  border: solid 2px #715e5a;
  content: '';
  background-color: #715e5a;
  background-image: linear-gradient(to right, #cdc8cf 14px, 0, #715e5a 16px 0, #cdc8cf 0), 
    linear-gradient(to right, #cdc8cf 14px, 0, #715e5a 16px 0, #cdc8cf 0), 
    linear-gradient(to right, #cdc8cf 7px, 0, #715e5a 9px, 0, #cdc8cf 21px, 0, #715e5a 23px, 0, #cdc8cf 0);
  background-size: 100% 20%, 100% 20%, 100% 50%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%, 0 50%;
}

顶部部分的梯形瓦，我们使用after：

1.请回忆我们初中学习的三角函数，我们得到斜边40px，60deg倾角的瓦，需要比墙宽40像素。

2.使用clip-path多边形，将after裁剪成梯形

.wall::after {
  position: absolute;
  top: 0;
  left: -20px;
  width: 140px;
  height: 40px;
  content: '';
  background: #053f17;
  transform-origin: center 0;
  transform: rotateX(60deg);
  clip-path: polygon(20px 0, 120px 0, 100% 100%, 0 100%);
  box-shadow: inset 0px -1px 30px rgba(255, 255, 255, .4);
}

这样，一个div就画出一面。

然后，我们将墙面复制六份，分别旋转60度形成一个六边形。

.wall-1 {
  transform: rotateY(0) translateZ(86px);
}
.wall-2 {
  transform: rotateY(60deg) translateZ(86px);
}
.wall-3 {
  transform: rotateY(120deg) translateZ(86px);
}
.wall-4 {
  transform: rotateY(180deg) translateZ(86px);
}
.wall-5 {
  transform: rotateY(240deg) translateZ(86px);
}
.wall-6 {
  transform: rotateY(300deg) translateZ(86px);
}

一层塔身就完成了。

我们将塔身复制11份，设置一下top值。

最后，将整个外层div复制一份，两个div略微做位移和旋转。得到了双子塔结构。

这中间有个可以优化的地方，就是是交界处的那一面墙，其实可以去掉的。减少一些dom。

第二步，我们开始画钟楼。

CSS画钟表，网络上有很多方式。我们可以做成很漂亮的还可以真实交互的钟表。

不过在这里，我们只要显示出钟表的样式就可以了。而且还是远观，不用特别精确。

这里。大家可以发现，钟楼的结构和墙体其实是一样的，我们直接复用墙体的样式。然后稍微修改

1. 修改顶部的梯形after，直接变成一个三角形将楼顶盖住。
2. 修改窗户的样式，我们还是要使用一个before来画出一个钟表的样式。（不要觉得不可能，见证奇迹的时候）
1. 使用圆锥渐变色，画出12组深浅相间的颜色，作为12个数字
2. 使用圆形渐变色，覆盖表盘，做出中心点和清除上边的12道线
3. 再使用圆锥渐变，只画出两条线作为时针和分针

第三步，画一个闪闪的红星。

基本原理是使用css画三个等边三角形。然后合并起来。这里就不再写代码了，网上很多。

最后一步，画出地基部分。

这个就想对简单多了。跟画墙体没有啥区别，就是六边形变成四边形。

after的背景继续使用线性渐变，画出栏杆部分。

.handrail::after {
  position: absolute;
  top: -30px;
  width: 100%;
  height: 20px;
  content: '';
  background-image: linear-gradient(90deg, #cdc8cf 4px, 0, #0000 12px 0);
  background-size: 12px;
}

然后再复制三层，分别使用sacle3D缩小一下X轴和Z轴。

增加上一个旋转动画，效果完成！！！

由于手机渲染效果较差，删除了一些效果。

代码仓库地址：

https://github.com/shb190802/html5

演示地址：

https://suohb.com/demo/win/erqi.html