效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/RyvgMZ

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/czPkasr

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,一个容器中包含 3 个 <span>:

&lt;div class="penrose"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;

居中显示:

html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

定义容器尺寸:

.penrose {
width: 20em;
height: 20em;
}

画出包含 3 条边的容器:

.penrose {
position: relative;
} .penrose span {
position: absolute;
width: 100%;
height: 100%;
} .penrose span:nth-child(1) {
transform: rotate(0deg);
} .penrose span:nth-child(2) {
transform: rotate(120deg);
} .penrose span:nth-child(3) {
transform: rotate(240deg);
}

为 3 条边所属的容器上色:

.penrose {
color: red;
} .penrose span {
background-color: currentColor;
} .penrose span:nth-child(1) {
filter: brightness(1);
} .penrose span:nth-child(2) {
filter: brightness(0.66);
} .penrose span:nth-child(3) {
filter: brightness(0.33);
}

用遮罩切出每一条边,组成彭罗斯三角形:

.penrose span {
clip-path: polygon(57% 0, 75% 0, 26% 85%, 89.5% 85%, 98.4% 100%, 0 100%);
} .penrose span:nth-child(2) {
top: 18.3%;
left: 43.3%;
} .penrose span:nth-child(3) {
top: 46.5%;
left: 5.9%;
}

定义旋转动画效果:

.penrose {
animation: rotating 30s linear infinite;
transform-origin: 66% 66%;
} @keyframes rotating {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(360deg);
}
}

最后,增加旋转时变色的效果:

@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);
}
}

大功告成!

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

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

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

    原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: <!-- penrose: 彭罗斯 --> < ...

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

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

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

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

  4. 如何用纯 CSS 创作一个记事本翻页动画

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

  5. 如何用纯 CSS 创作一个容器厚条纹边框特效

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

  6. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

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

  7. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

  8. 如何用纯 CSS 创作一个单元素抛盒子的 loader

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

  9. 如何用纯 CSS 创作一个雷达扫描动画

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

随机推荐

  1. Android_(控件)使用自定义控件在屏幕中绘制一条虚线

    在Android屏幕中绘制虚线,最通用的是自定义控件DashedLine,再将自定义控件放入xml布局中 运行截图: 程序结构 package com.example.asus.gary_042; i ...

  2. java使用解压zip文件,文件名乱码解决方案

    File outFileDir = new File(outDir);if (!outFileDir.exists()) { boolean isMakDir = outFileDir.mkdirs( ...

  3. 885. Spiral Matrix III

    On a 2 dimensional grid with R rows and C columns, we start at (r0, c0) facing east. Here, the north ...

  4. react-native命令初始化项目后可借助webstrom快速运行与调试项目

    利用webstorm工具打开RN项目,点击 然后添加 然后进行配置 最后,点击apply ,OK完成 后期运行项目直接点击:

  5. 关于 About

    关于我 我是 Ivy,目前武汉大学 GIS 专业在读硕士研究生,业余渣程序媛. 写了一些不起眼的代码(参看我的 GitHub),做了一些不起眼的小研究(参看我的 ResearchGate). 关于本站 ...

  6. Java语言 List 和 Array 相互转换

    Java语言 List 和 Array 相互转换 List集合 转换为 Array数组 List集合 转换成 Array数组,有 2 种方式,代码如下: import java.util.ArrayL ...

  7. Codeforces--C2. Good Numbers (hard version)

    题目链接http://codeforces.com/contest/1249/problem/C2.这是道进制转换题,我们的目的是找到最小的一个每个位都是1的三进制数来表示一个十进制数n.做法是,先将 ...

  8. 【HANA系列】SAP HANA SQL REPLACE替换字符串

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL REP ...

  9. Django 邮箱找回密码!!!!!!!!!!!!!!!!

    1.大概流程. @首先在完善登陆页面,增加忘记密码的链接. @为了账户安全,需要对操作者进行验证,向邮箱发随机数验证! @在重置验证码页面,验证验证码是否匹配(验证成功跳转至更改密码也页面). @ 重 ...

  10. spring mvc 异步 DeferredResult

    当一个请求到达API接口,如果该API接口的return返回值是DeferredResult,在没有超时或者DeferredResult对象设置setResult时,接口不会返回,但是Servlet容 ...