卅 地标图形设计

30个特色地标 – 各由30个三角形组成.

卅，数字三十的中文代用字。

组成的地标图形代表其各自的文化...

小小的图形组合起来就是美丽的图案，还有一定的视觉冲击力。

这是图形文化，地域地标文化，也是“卅”的文化。

卅–地标图形设计

30幅地标图形，来自于30个三角形，代表着30个地域的文化

这是一个CSS新型互动展示网站，相信你们会感觉到这个网站很有意思，并更希望与此网站有更多的互动

进入图形文化旅程
跳过开场动画

地标图形设计

  • 图形1

  • Vaquita

关于网站

30个地标 30个三角形

请选择其中一个点

进入我们的地标图形
或者按照顺序浏览
  • 名称：
  • |
  • 位置：

200410%

200510%

200610%

200710%

200810%

200910%

201010%

201110%

VALUE HEREText goes here

联系作者

姓名：Yaavi

电话：原电话已失效
QQ：27679365
微信：请扫二维码

百度“Yaavi”就可以找到我啦~

制作过程


自从听到CSS多边形,我一直有点惊讶的缺乏轰动的技术,所以我想创造一些不仅工作本身作为一个项目,但这也推动未充分利用的代码尽可能。

shard-shifting功能在webkit浏览器只工作,这当然是一种限制,但同时,它几乎完全基于webkit的移动。Firefox支持clip-path属性,但作为一个SVG引用的形状,因此,编码运动在一个完全不同的方式工作。我想重点纯CSS的路线。

没听说过吗?在这里,以一条线:

-webkit-clip-path:多边形(40% - 40%,50% - 60%,60% - 40%);

所以,本质上,每个形状演变,移动和玩弄的一套新的坐标,和他们保持三角形,这意味着3点,用CSS转换连接动作。没有使用技巧或工具得到了结果,在代码级别上或图形。逐点,形状的形状,每一个手工制作的插图后通过亲自缔造跟踪JS函数。

Polygon demonstration

如果您对该技术或项目有任何问题，请联系 Yaavi!

参考文献

非常感谢有互联网这个平台，所以才能更好的去完善作品，网站的制作也参考了不少的文献内容。

再次感谢~

碎片