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

原文地址：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);
}

posted on 2019-01-23 20:15 人生与戏阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10311186.html

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

前端每日实战：28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教程此视频 ...
如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...
前端每日实战：64# 视频演示如何用纯 CSS 绘制一个足球场
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVqXwJ 可交互视频此视频是可 ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...

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

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

最新文章

热门文章