原文地址：https://segmentfault.com/a/1190000014946883

感想：三个平面图形旋转

HTML代码：

<!-- penrose: 彭罗斯 --><div class="penrose"> <span></span> <span></span> <span></span></div>

CSS代码：

html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: black;}/* 定位容器尺寸 */.penrose{ position: relative; width: 20em; height: 20em; color: red; animation: rotating 30s linear infinite; transform-origin: 66% 66%;}@keyframes rotating { 0% { color: red; transform: rotate(0deg); } 20% { color: yellow; } 40% { color: lime; } 60% { color: blue; } 80% { color: fuchsia; } 100% { color: red; transform: rotate(720deg); }}.penrose span { position: absolute; width: 100%; height: 100%; /* currentColor: 当前颜色 */ background-color: currentColor; /* 用遮罩切出每一条边，组成彭罗斯三角形 */ clip-path: polygon(57% 0, 75% 0, 26% 85%, 89.5% 85%, 98.4% 100%, 0 100%);}.penrose span:nth-child(1) { /* 过滤器 亮度1 */ filter: brightness(1); transform: rotate(0deg);}.penrose span:nth-child(2) { top: 18.3%; left: 43.3%; filter: brightness(0.66); transform: rotate(120deg);}.penrose span:nth-child(3) { top: 46.5%; left: 5.9%; filter: brightness(0.33); transform: rotate(240deg);}