CSS-西安钟楼 西安钟楼视频讲解

上周末，去西安参加公司的年会。行程匆匆，没有时间在西安好好逛逛，即将遗憾离开。

在高铁站等高铁的时候，看见有家西安特产商店，就进去溜达溜达，然后发现了这个：

方方正正的纸片西安钟楼。完美契合html的技术。

老规矩，先看效果：

整个效果看着繁复，但是透过现象看本质，也没有那么复杂。

文章很长，不想看实现过程的建议直接去查看原文！！
http://suohb.com/demo/win/drumtower.html

开始需求分析：

1、围墙部分，其实是4面*4层墙，看着很多，但是大部分可以重复利用。

2、屋檐、屋顶部分，倾斜的梯形div拼接

3、外层的楼梯部分

开始实现：

1、围墙

因为围墙本身很多重复，这里只介绍一面墙的写法，其他15面墙基本copy就行。

我们遇到了第一个难点。一个带门的墙。画一个图形容易，但是要掏出来一个图形的洞就比较麻烦了。

当然，如果写很多个div，拼出来镂空的部分。还是可以实现的。不过会增加很多dom结构。不是我的风格。

在这里，我教大家使用一个div画出一整面的墙。

首先是围墙部分，我们使用div的before来完成。利用border，完成一个底部透明的凹形div。

.wall-outer::before{
  position: absolute;
  width: 260px;
  height: 70px;
  box-sizing: border-box;
  border-left: solid #ab1c20 110px;
  border-right: solid #ab1c20 110px;
  border-top: solid #ab1c20 50px;
  content: '';
}

但是我们需要的是圆形拱门。那么顶部我们扣出来一个半圆的窟窿。这里我使用mask属性。将透明元素透明部分掏空。

我们使用径向渐变，画出一个中心透明的圆左右mask-image。这样叠加之后，就形成一个圆形的拱门。

mask-image: radial-gradient(circle at bottom,transparent 20px,#ab1c20 20px) ;
mask-position-y: 50px ;

剩下顶部的围栏。你以为我会画一堆的div吗。NO！！！

顶部使用这个div的after属性来完成。使用backgound-image属性，可以支持多个图片的特点。我们使用线性渐变，作为两个图片。

第一个，颜色+透明+颜色。在X轴repeat。栅栏的感觉。

第二个，设置线性渐变，高度为3px，也在X轴repeat，画出横杆。

.wall-outer::after{
  position: absolute;
  top: -12px;
  width: 100%;
  height: 12px;
  content: '';
  background-image: linear-gradient(to right,#ab1c20 2px, transparent 2px, transparent 11px,#ab1c20 11px,#ab1c20 13px),
  linear-gradient(to right,#ab1c20 0px,#ab1c20 32px);
  background-size: 13px 12px,13px 3px;
  background-position: 0 0,0 5px;
  background-repeat: repeat-x;
}

这样，我们使用一个div完成这样一面带着门和栅栏的墙面。

其他墙面基本也是此原理，这里就不再详写了。效果如下：

2、屋檐和屋顶

屋檐和屋顶，写法是一样的，使用border的原理，可以画出梯形和三角形。然后算出倾斜角度和位置。这里，用到初中的三角函数知识，根据屋檐的角度和尺寸，算好屋檐的位置和长度。

/* 最底层房檐 */
.eaves{
  position: absolute;
  top: -130px;
  left: -120px;
  width: 240px;
  height: 20px;
  transform: translateZ(120px) rotateX(60deg) ;
  transform-origin: center bottom;
}
.eaves::before{
  position: absolute;
  left: 0;
  top: 0;
  width: 204px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent ;
  border-bottom: 20px solid #ab1c20;
  filter: drop-shadow(0 0 1px #fff);
  content: '';
}

3、外层楼梯

楼梯部分，跟围墙一样写法。特殊部分是。将左右两侧的div使用transform的skewY属性做出倾斜的楼梯。

/* 右侧楼梯1 */
.door-right{
  position: absolute;
  left: 50px;
  bottom: 0;
  width: 50px;
  height: 62px;
  transform-origin: left -12px;
  transform: translateZ(140px);
  filter: drop-shadow(0 0 1px #fff);
  overflow: hidden;
}
.door-right::before{
  position: absolute;
  top:12px;
  width: 50px;
  height: 50px;
  background-color: #ab1c20;
  content: '';
  transform-origin: left -12px;
  transform: skewY(20deg);
}
.door-right::after{
  position: absolute;
  top: -0px;
  width: 100%;
  height: 12px;
  content: '';
  background-image: linear-gradient(to right,#ab1c20 2px, transparent 2px, transparent 8px,#ab1c20 8px,#ab1c20 10px),
  linear-gradient(to right,#ab1c20 0px,#ab1c20 32px);
  background-size: 10px 12px,10px 3px;
  background-position: 0 0,0 5px;
  background-repeat: repeat-x;
  transform-origin: left -12px;
  transform: skewY(20deg);
}

效果完成！！！！

具体效果，建议查看原文。

代码仓库地址：

https://github.com/shb190802/html5

演示地址：

http://suohb.com/demo/win/drumtower.html