HTML5/SVG 迪厅LED灯光图标

Refer to: https://twitter.com/NERDDISCO

led，图标

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2118
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #15171e;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#branding,
.description {
    width: 70%;
    max-width: 40rem;
}
rect[class^="P-"] {
    fill: #15171e;
    -webkit-animation-name: change-fill;
    animation-name: change-fill;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.P-1 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.P-2 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.P-3 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.P-4 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.P-5 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.P-6 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.P-7 {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.P-8 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.P-9 {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.P-10 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.P-11 {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.P-12 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
@-webkit-keyframes change-fill {
    8.33333% {
        fill: #cb0073;
    }
    16.66667% {
        fill: #a0038b;
    }
    25% {
        fill: #3813ad;
    }
    33.33333% {
        fill: #113fa9;
    }
    41.66667% {
        fill: #009797;
    }
    50% {
        fill: #00ca00;
    }
    58.33333% {
        fill: #9dec00;
    }
    66.66667% {
        fill: #fdfd00;
    }
    75% {
        fill: #fdd100;
    }
    83.33333% {
        fill: #fda800;
    }
    91.66667% {
        fill: #fd7300;
    }
    100% {
        fill: #fd0000;
    }
}
@keyframes change-fill {
    8.33333% {
        fill: #cb0073;
    }
    16.66667% {
        fill: #a0038b;
    }
    25% {
        fill: #3813ad;
    }
    33.33333% {
        fill: #113fa9;
    }
    41.66667% {
        fill: #009797;
    }
    50% {
        fill: #00ca00;
    }
    58.33333% {
        fill: #9dec00;
    }
    66.66667% {
        fill: #fdfd00;
    }
    75% {
        fill: #fdd100;
    }
    83.33333% {
        fill: #fda800;
    }
    91.66667% {
        fill: #fd7300;
    }
    100% {
        fill: #fd0000;
    }
}
.description {
    margin-top: 4rem;
    text-align: center;
    color: white;
    font-size: 1.2rem;
}
.description a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
}
.description a:hover,
.description a:focus,
.description a:active {
    -webkit-animation: change-color 0.2s infinite;
    animation: change-color 0.2s infinite;
}
@-webkit-keyframes change-color {
    8.33333% {
        color: #cb0073;
    }
    16.66667% {
        color: #a0038b;
    }
    25% {
        color: #3813ad;
    }
    33.33333% {
        color: #113fa9;
    }
    41.66667% {
        color: #009797;
    }
    50% {
        color: #00ca00;
    }
    58.33333% {
        color: #9dec00;
    }
    66.66667% {
        color: #fdfd00;
    }
    75% {
        color: #fdd100;
    }
    83.33333% {
        color: #fda800;
    }
    91.66667% {
        color: #fd7300;
    }
    100% {
        color: #fd0000;
    }
}
@keyframes change-color {
    8.33333% {
        color: #cb0073;
    }
    16.66667% {
        color: #a0038b;
    }
    25% {
        color: #3813ad;
    }
    33.33333% {
        color: #113fa9;
    }
    41.66667% {
        color: #009797;
    }
    50% {
        color: #00ca00;
    }
    58.33333% {
        color: #9dec00;
    }
    66.66667% {
        color: #fdfd00;
    }
    75% {
        color: #fdd100;
    }
    83.33333% {
        color: #fda800;
    }
    91.66667% {
        color: #fd7300;
    }
    100% {
        color: #fd0000;
    }
}

HTML

</svg>

<div class="description">
    <p>
        [ Get your nerdy ass on the dancefloor ]
    </p>
    <p>
        follow <a href="https://twitter.com/nerddisco">@NERDDISCO</a> by <a href="https://twitter.com/TimPietrusky"> @TimPietrusky</a>
    </p>
</div>

Refer to: https://twitter.com/NERDDISCO

led，图标

编辑器支持Emmet

快捷键

Refer to: https://twitter.com/NERDDISCO

led，图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：