html--比萨斜塔

最新推荐文章于 2024-06-04 19:46:55 发布
最新推荐文章于 2024-06-04 19:46:55 发布
阅读量762 收藏 15
点赞数 31
分类专栏： html 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/138859317
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  *,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #d7f7ff;
}
.tower {
  width: 30vh;
  height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  top: 0;
  position: relative;
  -webkit-animation: boom 5s linear forwards;
          animation: boom 5s linear forwards;
}
.tower__balcony {
  width: 90%;
  height: 4%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 0.9vh solid #584b36;
}
.tower__balcony div {
  width: 0.9vh;
  height: 100%;
  background: #584b36;
}
.tower__balcony div:nth-child(even) {
  width: 1.2vh;
  height: 200%;
  border-radius: 20% 20% 0 0;
}
.tower__balcony div:nth-child(6) {
  height: 450%;
  border-radius: 0;
}
.tower__handrail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 15%;
  left: -10%;
  width: 120%;
  height: 23%;
  z-index: 2;
  border-top: 0.9vh solid #584b36;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.tower__handrail div {
  width: 0.9vh;
  height: 200%;
  background: #584b36;
  border-radius: 30% 30% 0 0;
}
.tower__handrail div:nth-child(3) {
  margin: 0 2.4vh;
}
.tower__roof {
  width: 90%;
  height: 15%;
  margin: 0 auto;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f8e3c2), color-stop(50%, #f1c785));
  background: linear-gradient(left, #f8e3c2 50%, #f1c785 50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  border: 0.9vh solid #584b36;
  border-bottom: none;
}
.tower__roof:after {
  content: "";
  position: absolute;
  width: 135%;
  height: 30%;
  background: -webkit-gradient(linear, right top, left top, from(#f8e3c2), to(#f1c785));
  background: linear-gradient(right, #f8e3c2, #f1c785);
  left: 50%;
  bottom: -10%;
  z-index: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  border: 0.9vh solid #584b36;
  border-radius: 9vh;
}
.tower__roof-door {
  width: 23%;
  height: 80%;
  border-radius: 50% 50% 0 0;
  background-color: #c9a772;
  border: 0.9vh solid #584b36;
  border-bottom: none;
}
.tower__roof-door:nth-child(2) {
  width: 25%;
  height: 70%;
}
.tower__bottom {
  width: 100%;
  height: 20%;
  background: #f1c785;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  border: 0.9vh solid #584b36;
  border-top: none;
}
.tower__door {
  width: 27%;
  height: 80%;
  border-radius: 50% 50% 0 0/30% 30% 0 0;
  background: #c9a772;
  border: 0.9vh solid #584b36;
  border-bottom: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 5% 0;
}
.tower__door-stick {
  background: #564a35;
  height: 100%;
}
.tower__door-stick:nth-child(1) {
  width: 16%;
}
.tower__door-stick:nth-child(2) {
  width: 28%;
}
.tower__door-stick:nth-child(3) {
  width: 26%;
}
.tower__door-stick-container {
  width: 100%;
  height: 3%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.tower__floor {
  width: 100%;
  height: 13%;
  background: #f1c785;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  position: relative;
  border: 0.9vh solid #584b36;
  border-top: none;
  border-bottom: none;
}
.tower__floor:after {
  content: "";
  position: absolute;
  width: 120%;
  height: 30%;
  background: -webkit-gradient(linear, left top, right top, from(#f8e3c2), to(#f1c785));
  background: linear-gradient(left, #f8e3c2, #f1c785);
  left: 50%;
  bottom: -10%;
  z-index: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  border: 0.9vh solid #584b36;
  border-radius: 9vh;
}
.tower__window {
  width: 13%;
  height: 75%;
  background: #c9a772;
  border: 0.9vh solid #584b36;
  border-bottom: none;
  border-radius: 50% 50% 0 0/20% 20% 0 0;
}
.flag {
  position: absolute;
  left: 52%;
  top: -0.5%;
  width: 6vh;
  height: 4.5vh;
  background: -webkit-gradient(linear, left top, right top, color-stop(33%, #009246), color-stop(33%, #fff), color-stop(66%, #fff), color-stop(66%, #ce2b37));
  background: linear-gradient(to right, #009246 33%, #fff 33%, #fff 66%, #ce2b37 66%);
}
@-webkit-keyframes boom {
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    top: 5%;
  }
}
@keyframes boom {
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    top: 5%;
  }
}

  </style>
 </HEAD>

 <BODY>
<div class="tower">
  <div class="tower__balcony"><span class="flag"></span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="tower__roof">
    <div class="tower__roof-door"></div>
    <div class="tower__roof-door"></div>
    <div class="tower__roof-door"></div>
    <div class="tower__handrail">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="tower__floor">
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
  </div>
  <div class="tower__floor">
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
  </div>
  <div class="tower__floor">
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
  </div>
  <div class="tower__floor">
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
    <div class="tower__window"></div>
  </div>
  <div class="tower__bottom">
    <div class="tower__door">
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
    </div>
    <div class="tower__door">
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
    </div>
    <div class="tower__door">
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
      <div class="tower__door-stick-container">
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
        <div class="tower__door-stick"></div>
      </div>
    </div>
  </div>
</div>
  <script></script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 31
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
mask-rcnn-fine-tune-pisa:比萨斜塔数据集上的微调蒙版R-CNN
04-12
面具rcnn微调比萨 （WIP）比萨斜塔数据集微调蒙版R-CNN
论文研究 - 比萨斜塔顺序施工过程与结构模拟
05-15
结构的倾斜遍布世界各地，并在不同程度上产生影响。 因此，了解背后的原因很重要。 在此报告中，使用有限元代码PLAXIS讨论并模拟了典型的倾斜结构比萨斜塔的顺序构造。 在二维平面上执行仿真，并在简化建模的前提下考虑了简化因素。 建立了三个不同的模型，其中一个作为控制变量，而另外两个模型则建立了精确的偏心率。 从分析中获得数据，并绘制成图表以清楚显示倾斜角度与施工阶段之间的关系。 通过合理而完整的模拟，该研究能够证明可压缩的底土在影响高层建筑的倾斜性能方面的重要作用。
【比萨斜塔个性建筑桌面壁纸下载】_10.6分享
awtk98037的博客
10-06 135
更新时间：2013-10-06 壁纸简介： 今天桌面壁纸要给大家带来这款意大利比萨斜塔个性建筑桌面壁纸下载，比萨斜塔是意大利比萨城大教堂的独立式钟楼，于意大利托斯卡纳省比萨城北面的奇迹广场上。有着罗马式建筑风格。比萨斜塔位于比萨大教堂的后面呢~ 转载于:https://www.cnblogs.com/kusha/p/3353664.html...
html+css知识点总结回顾（二）
qq_43710066的博客
07-25 339
html和css的基础知识总结！超详细！呕心沥血整理！大家一起学习，一起进步！
智力题-困难型
weixin_34005042的博客
05-20 403
1.小明和小华买了10斤蜂蜜,装在一个大瓶子里.要把蜂蜜平分,只有两个空瓶子,一个正好装7斤,另一个正好装3斤.怎样才能用最简单的方法把蜂蜜分出来. 2.有口井不知有多深,现有一跟绳子,也不知道有多长.把绳子折成3折,把一端垂下井底.当绳子的下端到达井底时,上端比井口低1尺.如果把绳子折成2折.那下端到达井低时,上端高出6尺.你知道井有多深,绳子有多长了吗 3.有4条船,这4条船划到...
html实现比萨斜塔
路在前方
10-31 263
实现代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Ke
比萨斜塔——统计显著性检验
weixin_30794851的博客
02-24 280
http://blog.csdn.net/zm714981790/article/details/51245502?locationNum=16 转载 Dataset 比萨斜塔是意大利最大的旅游景点之一。几百年来这座塔慢慢靠向一边,最终达到5.5度的倾斜角度，在顶端水平偏离了近3米。年度数据pisa.csv文件记录了从1975年到1987年测量塔的倾斜，其中lean代...
介绍比萨斜塔的说明文.docx
11-16
介绍比萨斜塔的说明文.docx
2013高考语文 比萨斜塔没有护栏作文素材
08-07
2013高考语文 比萨斜塔没有护栏作文素材
2013届高考语文 比萨斜塔没有护栏写作素材
08-07
2013届高考语文 比萨斜塔没有护栏写作素材
html 添加元素如何能提升速度
大黄鸭在发光的专栏
06-01 401
综上所述，通过使用文档片段、innerHTML、虚拟滚动以及避免频繁的重排和重绘，你可以提高在 HTML 中添加元素的速度和性能。在 HTML 中，如果你需要频繁地添加大量元素，需要确保你的操作能够以最佳性能进行。：如果你需要展示大量数据，可以考虑使用虚拟滚动来仅渲染可见区域内的元素，而不是一次性渲染所有元素。这可以节省大量时间和内存。：当添加元素时，尽量避免频繁的 DOM 操作，因为每次修改都可能会触发浏览器的重排和重绘，影响性能。
HTML跨年烟花
兔子王
06-04 1678
学会了这个html烟花秀，跨年就不缺文案喽~
Vue中转换HTML为PDF
qq_44792224的博客
06-03 345
添加链接描述
交互式流程图组件DHTMLX Diagram v6.0 - 拥有更灵活的高度可定制功能
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
06-04 228
本文将为大家介绍交互式流程图组件DHTMLX Diagram v6.0发布的一些新功能，欢迎下载最新版体验！
在HTML中写入JavaScript
jgxmw01的博客
06-01 489
通过这两种方法，你可以轻松地在网站中添加JavaScript代码，从而为你的网站添加各种交互功能。直接在HTML中编写JavaScript适用于代码量较少的情况，而引入外部文件则适用于更大型的项目。这可以通过直接在HTML文件中写入JavaScript代码，或者通过引入外部JavaScript文件来实现。然后，你可以在这个文件中编写你的JavaScript代码。当你的JavaScript代码量较大时，将代码保存在外部文件中更为清晰和高效。在上面的示例中，src属性指定了外部JavaScript文件的路径。
CSS（盒子模型，定位，浮动，扩展）
最新发布
m0_57463864的博客
06-04 398
*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。设置外边距 - 下边距。设置外边距 - 右边距。设置外边距 - 左边距。设置外边距 - 上边距。
vue 把html转成blob传给后台方法；把后台传回的blod，保存文件
qq_41737172的博客
06-04 131
vue 把html转成blob传给后台方法；把后台传回的blod，保存文件。将 html 转 blod 并 通过formData传给后台。将后台传回blod， 下载到本地为docx。直接导出 html 内容，保存到本地。
html 使用svg矢量图时无法 调整宽高问题解决，不能像图片一样设置宽高比例问题
oMangGuoBuDing1的专栏
06-04 130
【代码】html 使用svg矢量图时无法 调整宽高问题解决，不能像图片一样设置宽高比例问题。
HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)
weixin_42283461的博客
05-28 1318
HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值