前端每日实战:28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形...
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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>:
<div class="penrose"><span></span><span></span><span></span>
</div>
居中显示:
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);}
}
大功告成!
前端每日实战:28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形...相关推荐
- 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
- 前端每日实战:64# 视频演示如何用纯 CSS 绘制一个足球场
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVqXwJ 可交互视频 此视频是可 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
最新文章
- 电子商务中遇到组合搜索的问题
- rsync文件实时同步_从文件同步rsync算法谈起
- nacos1.3.2连接mysql_Nacos 1.3.0版本部署连接mysql 8+
- uml里的extend和include_用例图中包含(include)扩展(extend)和泛化(generalization)关系详解...
- python 收发邮件_python发送各类邮件的主要基本方法
- maven向本地仓库导入jar包
- 随机信号功率谱估计方法matlab仿真
- IDEA中集成使用SVN
- 服务器密码忘记处理之二:重置密码
- CorelDRAW入门教程-用CDR制作漂亮小雨伞
- 营业执照争夺背后:吴忌寒正在重塑比特大陆 |链捕手
- 用树莓派做linux电视盒子,用树莓派制造一台“口袋电视”
- 【Mybatisplus】创建Spring Boot工程打包错误解决方法
- 日常学习之:使用均值来填补缺失值的条件
- 6英寸手持终端丨三防手机丨手持PDA丨提高配送效率
- java dozer,MapStruct相当于提示(Dozer)?
- 无监督特征学习(半监督学习+自学习)
- OpenGL二次曲面绘制
- 从您的shell调用其他shells
- 一道烧脑的双重否定逻辑题