类似迷幻蛇的动效

Psychadelic Snake(ish) Thing?

CSS3, jQuery

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

第三方库
作品简介 1713
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: black;
}
@keyframes glo {
    0% {
        box-shadow: 0 0 10px orange;
    }
    50% {
        box-shadow: 0 0 20px lime;
    }
    100% {
        box-shadow: 0 0 30px red;
    }
}
.round {
    border-radius: 50%;
}
div {
    margin: -1px 0px;
}
.flip {
    transform: rotateY(180deg) rotateX(180deg);
    background-color: rebeccapurple !important;
    animation: glo 1s ease-out;
}
.flip2 {
    transform: rotateY(180deg) rotateX(180deg) rotateZ(360deg);
    transition: 1s;
    background-color: orange !important;
}
#main {
    padding-top: 30px;
}
#inner {
    cursor: pointer;
    box-shadow: inset 0 0 50px black;
    background-image: radial-gradient(black 0%, maroon 100%);
}
#inner div {
    cursor: pointer;
    font-size: 0px !important;
    transition: 0.6s;
    line-height: 0 !important;
    height: 20px;
    width: 20px;
    display: inline-block;
    border: solid 1px blue;
    background-color: darkblue;
    box-shadow: inset 0 0 10px blue;
    perspective: 1000px;
    transform-style: preserve-3d;
}

HTML

Psychadelic Snake(ish) Thing?

CSS3, jQuery

编辑器支持Emmet

快捷键

Psychadelic Snake(ish) Thing?

CSS3, jQuery

CSS3 类似调色卡的LOADING动画

CSS3 点点组成的类似3D正方体翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：