zoukankan      html  css  js  c++  java
  • 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);
    }
  • 相关阅读:
    熔断降级(Polly)
    网站被黑
    Redis 缓存穿透
    搭建私有Nuget仓库
    什么是配置
    css3的@media媒体查询
    css设置background图片的位置实现居中
    UTF-8有签名和无签名的区别
    SQL Server表结构和数据导入到MySQL
    Jquery实现滚动到底部加载更多(最原始)
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10311186.html
Copyright © 2011-2022 走看看