6. 纯 CSS 绘制一颗闪闪发光的璀璨钻石

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);
    }
}

 

posted on 2018-12-11 19:01  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

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