zoukankan      html  css  js  c++  java
  • 6. 纯 CSS 绘制一颗闪闪发光的璀璨钻石

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

    HTML代码:

    <div class="diamond">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
    </div>

    CSS代码:

    /* 内容居中 */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items:center;
    }
    /* 一个部分的四个颜色 */
    :root{
        --color1: deepskyblue;
        --color2: steelblue;
        --color3: royalblue;
        --color4: dodgerblue;
    }
    .diamond{
        /* 显示:网格 */
        display:grid;
        /* 左右占比 */
        grid-template-columns:1fr 1fr;
        /* 倾斜45度 */
        transform:rotate(45deg);
    }
    .diamond span{
        /* border: 50px solid red; */
        border-width:50px;
        border-style:solid;
        /* 上右下左 */
        border-color: var(--color1) var(--color2) var(--color3) var(--color4);
    }
    /* 设置第一个span的border-color */
    .diamond span:first-child {
        /* transparent 透明 */
        border-color: transparent var(--color2) var(--color3) transparent;
    }
    
    .diamond span:not(:first-child) {
        animation: animate 2s linear infinite;
    }
    
    @keyframes animate {
        0% {
            border-color: var(--color1) var(--color2) var(--color3) var(--color4);
        }
        25% {
            border-color: var(--color4) var(--color1) var(--color2) var(--color3);
        }
        50% {
            border-color: var(--color3) var(--color4) var(--color1) var(--color2);
        }
        75% {
            border-color: var(--color2) var(--color3) var(--color4) var(--color1);
        }
        100% {
            border-color: var(--color1) var(--color2) var(--color3) var(--color4);
        }
    }
  • 相关阅读:
    PHP学习之字符串
    PHP学习之常量
    PHP之数据类型
    AngularJS学习之Select(选择框)
    Angular JS 学习之Http
    PHP之echo/print
    Angular JS 学习之服务(Service)
    Angular JS 学习之过滤器
    git打包
    gdb分析core文件
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10104345.html
Copyright © 2011-2022 走看看