CSS碎片实现


看到了CSS碎片拼图这个效果,觉得效果十分赞,打算学习一下。


在查看源代码之前,思路是大概是运用animation进行各种变换,通过改变元素background-color来实现阴影的变化。并猜想是否可以通过svg来实现整个图形的运动与变换。


以下均在window下搜狗浏览器的高速模式下操作。f12打开调试工具,首先看到console中说明CSS的dpi并不对应这屏幕的dpi,所以使用dppx为单位。查看资料发现这应该是针对移动端的页面的,暂时不深入研究。有关资料:dpi,分辨率。

单位‘dppx’

  页面的主要结构是一个容器包含30个
,这里出现了伪元素。有关资料: 伪元素与伪类、 伪元素用法。
伪元素
  可以注意到,每隔一段时间,这个伪元素通过新增的 animation来实现了每一块三角形闪烁的效果。
伪元素

shimmer

实现CSS碎片拼图效果最重要的属性是clip-path,这个属性实现了图形的裁剪效果。在效果中通过使用clip-path: polygon(x1 y1, x2 y2, x3 y3,...)来获得所需三角形。例子如下:


.triangle{
width: 100px; height: 100px; background-color: #0AA;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

CSS碎片实现_第1张图片
三角形
  当然,也可以裁剪图片。例子如下:
 
 
.beauty{
width: 100px; height: 100px;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

CSS碎片实现_第2张图片
三角图片
  通过多个不规则三角形就能拼接成一幅图片了。
CSS碎片实现_第3张图片
夏威夷乌鸦
  但是,这样拼接成的图片是静态的,而 clip-path还有一个隐藏属性,当作用于同一个元素的 clip-path的坐标结构相同时,像 clip-path:polygon(x1 y1, x2 y2, x3 y3)clip-path:polygon(x4 y4, x5 y5, x6 y6),它们内部都是3组坐标,结构相同,此时,元素的 animation能产生连贯的效果。例子如下:
 
 
.beauty{
width: 200px; height: 200px;
transition: all 1s;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.beauty:hover{
clip-path: polygon(0 0%, 100% 0, 50% 50%);
-webkit-clip-path: polygon(0 0%, 100% 0, 50% 50%);
}
  本来想逆向出这种效果的实现,结果发现作者已经给出了超具体的流程,具体可参阅 CSS碎片拼图的实现。
  完

你可能感兴趣的:(CSS碎片实现)