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

感想:三个平面图形旋转

HTML代码:

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

CSS代码:

html, body {
margin:;
padding:;
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);
}

28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形的更多相关文章

  1. 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...

  2. 43.纯 CSS 绘制一个充满动感的 Vue logo

    原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="v ...

  3. 如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教 ...

  4. 前端每日实战:43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教程 此视频 ...

  5. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  6. 史上最强大的40多个纯CSS绘制的图形[转]

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  7. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  8. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  9. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

随机推荐

  1. excel技巧--多行排成单列

    要将上图的多行排成单列的效果,做法如下: 1.在倒数第二列的下方单元格,写入=号,然后再点击倒数第一列第一个单元格.这样复制该单元格的公式. 2.然后对着这个复制好的单元格的右下角一直往下拖拉,尽量拖 ...

  2. 为IE内核的WebBrowser控件内存泄漏所烦恼的可以考虑用Cefsharp代替它!

    为IE内核的WebBrowser控件内存泄漏所烦恼的朋友们,可以考虑用Cefsharp代替WebBrowser控件 特意做了一个程序来测试 利用Cefsharp做控件,访问网站.每分钟刷新2次,初始时 ...

  3. locaton.href传参数

    location.href = location.href.substring(0,location.href.lastIndexOf('?'))+'?typeId=' + fid + '&p ...

  4. Selenium操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  5. AutoCAD的代替软件

    AutoCAD的代替软件Autocad2005以上版本都需要.net framework的支持,安装起来太麻烦,而且卡顿.以下几个软件可以代替Autocad,操作和插件基本都能兼容Autocad.1. ...

  6. 【ActiveMQ】之安全机制(二)客户端连接安全

    配置完管控台的安全之后,我们还要配置客户端连接安全,否则大家都可以往MQ上发送消息,这样太危险! 根据官方文档,http://activemq.apache.org/security.html Act ...

  7. PAT 乙级 1060 爱丁顿数(25) C++版

    1060. 爱丁顿数(25) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 英国天文学家爱丁顿很喜欢骑车.据说他 ...

  8. vue-router总结

    之前写过一篇关于vue-router的文章,主要是介绍怎么结合cli2在项目中使用vue-router,比较的简单,今天想结合cli3来总结一下vue-router的具体用法. cli3 在介绍vue ...

  9. elasticsearch 安装(基于java运行环境)

    解压安装包 [root@Aliyun resource]# tar -xvf elasticsearch-5.5.2.tar.gz 添加当前主机的普通账户 [root@Aliyun resource] ...

  10. spring4.3新注解之:@RequestMapping变种(@GetMapping,@PostMapping,@PutMapping,@DeleteMapping,@PatchMapping)

    Spring 4.3 中引进了下面的注解 @RequestMapping 在方法层级的变种,来帮助简化常用 HTTP 方法的映射,并更好地表达被注解的方法的语义.比如,@GetMapping可以读作 ...