码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-01-23 21:39:25      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:body   color   遮罩   pad   htm   linear   round   https   pos   

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

 

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

标签:body   color   遮罩   pad   htm   linear   round   https   pos   

原文地址:https://www.cnblogs.com/FlyingLiao/p/10311186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!