CSS3 3D效果的蓝色六边形群动态漂浮效果

hex feeling blue (pure CSS 3D)

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #444;
}
div {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.scene {
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin: -10.3923em -24.75em;
    width: 49.5em;
    height: 20.78461em;
    -webkit-perspective: 80em;
    perspective: 80em;
    box-shadow: 0 0 3px #000, 1px 1px 1px #000;
}
.prism6 {
    -webkit-animation: a 5s ease-in-out infinite alternate;
    animation: a 5s ease-in-out infinite alternate;
}
.prism6:nth-child(12n + 1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.prism6:nth-child(12n + 2) {
    -webkit-animation-delay: -0.3125s;
    animation-delay: -0.3125s;
}
.prism6:nth-child(12n + 3) {
    -webkit-animation-delay: -0.625s;
    animation-delay: -0.625s;
}
.prism6:nth-child(12n + 4) {
    -webkit-animation-delay: -0.9375s;
    animation-delay: -0.9375s;
}
.prism6:nth-child(12n + 5) {
    -webkit-animation-delay: -1.25s;
    animation-delay: -1.25s;
}
.prism6:nth-child(12n + 6) {
    -webkit-animation-delay: -1.5625s;
    animation-delay: -1.5625s;
}
.prism6:nth-child(12n + 7) {
    -webkit-animation-delay: -1.875s;
    animation-delay: -1.875s;
}
.prism6:nth-child(12n + 8) {
    -webkit-animation-delay: -2.1875s;
    animation-delay: -2.1875s;
}
.prism6:nth-child(12n + 9) {
    -webkit-animation-delay: -2.5s;
    animation-delay: -2.5s;
}
.prism6:nth-child(12n + 10) {
    -webkit-animation-delay: -2.8125s;
    animation-delay: -2.8125s;
}
.prism6:nth-child(12n + 11) {
    -webkit-animation-delay: -3.125s;
    animation-delay: -3.125s;
}
.prism6:nth-child(12n + 12) {
    -webkit-animation-delay: -3.4375s;
    animation-delay: -3.4375s;
}
.prism6:nth-child(1) {
    margin: 0em 0em;
}
.prism6:nth-child(2) {
    margin: -2.59808em 4.5em;
}
.prism6:nth-child(3) {
    margin: 0em 9em;
}
.prism6:nth-child(4) {
    margin: -2.59808em 13.5em;
}
.prism6:nth-child(5) {
    margin: 0em 18em;
}
.prism6:nth-child(6) {
    margin: -2.59808em 22.5em;
}
.prism6:nth-child(7) {
    margin: 0em 27em;
}
.prism6:nth-child(8) {
    margin: -2.59808em 31.5em;
}
.prism6:nth-child(9) {
    margin: 0em 36em;
}
.prism6:nth-child(10) {
    margin: -2.59808em 40.5em;
}
.prism6:nth-child(11) {
    margin: 0em 45em;
}
.prism6:nth-child(12) {
    margin: -2.59808em 49.5em;
}
.prism6:nth-child(13) {
    margin: 5.19615em 0em;
}
.prism6:nth-child(14) {
    margin: 2.59808em 4.5em;
}
.prism6:nth-child(15) {
    margin: 5.19615em 9em;
}
.prism6:nth-child(16) {
    margin: 2.59808em 13.5em;
}
.prism6:nth-child(17) {
    margin: 5.19615em 18em;
}
.prism6:nth-child(18) {
    margin: 2.59808em 22.5em;
}
.prism6:nth-child(19) {
    margin: 5.19615em 27em;
}
.prism6:nth-child(20) {
    margin: 2.59808em 31.5em;
}
.prism6:nth-child(21) {
    margin: 5.19615em 36em;
}
.prism6:nth-child(22) {
    margin: 2.59808em 40.5em;
}
.prism6:nth-child(23) {
    margin: 5.19615em 45em;
}
.prism6:nth-child(24) {
    margin: 2.59808em 49.5em;
}
.prism6:nth-child(25) {
    margin: 10.3923em 0em;
}
.prism6:nth-child(26) {
    margin: 7.79423em 4.5em;
}
.prism6:nth-child(27) {
    margin: 10.3923em 9em;
}
.prism6:nth-child(28) {
    margin: 7.79423em 13.5em;
}
.prism6:nth-child(29) {
    margin: 10.3923em 18em;
}
.prism6:nth-child(30) {
    margin: 7.79423em 22.5em;
}
.prism6:nth-child(31) {
    margin: 10.3923em 27em;
}
.prism6:nth-child(32) {
    margin: 7.79423em 31.5em;
}
.prism6:nth-child(33) {
    margin: 10.3923em 36em;
}
.prism6:nth-child(34) {
    margin: 7.79423em 40.5em;
}
.prism6:nth-child(35) {
    margin: 10.3923em 45em;
}
.prism6:nth-child(36) {
    margin: 7.79423em 49.5em;
}
.prism6:nth-child(37) {
    margin: 15.58846em 0em;
}
.prism6:nth-child(38) {
    margin: 12.99038em 4.5em;
}
.prism6:nth-child(39) {
    margin: 15.58846em 9em;
}
.prism6:nth-child(40) {
    margin: 12.99038em 13.5em;
}
.prism6:nth-child(41) {
    margin: 15.58846em 18em;
}
.prism6:nth-child(42) {
    margin: 12.99038em 22.5em;
}
.prism6:nth-child(43) {
    margin: 15.58846em 27em;
}
.prism6:nth-child(44) {
    margin: 12.99038em 31.5em;
}
.prism6:nth-child(45) {
    margin: 15.58846em 36em;
}
.prism6:nth-child(46) {
    margin: 12.99038em 40.5em;
}
.prism6:nth-child(47) {
    margin: 15.58846em 45em;
}
.prism6:nth-child(48) {
    margin: 12.99038em 49.5em;
}
.prism6:nth-child(49) {
    margin: 20.78461em 0em;
}
.prism6:nth-child(50) {
    margin: 18.18653em 4.5em;
}
.prism6:nth-child(51) {
    margin: 20.78461em 9em;
}
.prism6:nth-child(52) {
    margin: 18.18653em 13.5em;
}
.prism6:nth-child(53) {
    margin: 20.78461em 18em;
}
.prism6:nth-child(54) {
    margin: 18.18653em 22.5em;
}
.prism6:nth-child(55) {
    margin: 20.78461em 27em;
}
.prism6:nth-child(56) {
    margin: 18.18653em 31.5em;
}
.prism6:nth-child(57) {
    margin: 20.78461em 36em;
}
.prism6:nth-child(58) {
    margin: 18.18653em 40.5em;
}
.prism6:nth-child(59) {
    margin: 20.78461em 45em;
}
.prism6:nth-child(60) {
    margin: 18.18653em 49.5em;
}
.prism6:nth-child(61) {
    margin: 25.98076em 0em;
}
.prism6:nth-child(62) {
    margin: 23.38269em 4.5em;
}
.prism6:nth-child(63) {
    margin: 25.98076em 9em;
}
.prism6:nth-child(64) {
    margin: 23.38269em 13.5em;
}
.prism6:nth-child(65) {
    margin: 25.98076em 18em;
}
.prism6:nth-child(66) {
    margin: 23.38269em 22.5em;
}
.prism6:nth-child(67) {
    margin: 25.98076em 27em;
}
.prism6:nth-child(68) {
    margin: 23.38269em 31.5em;
}
.prism6:nth-child(69) {
    margin: 25.98076em 36em;
}
.prism6:nth-child(70) {
    margin: 23.38269em 40.5em;
}
.prism6:nth-child(71) {
    margin: 25.98076em 45em;
}
.prism6:nth-child(72) {
    margin: 23.38269em 49.5em;
}
.prism6__face {
    margin: -10.3923em -1.5em;
    width: 3em;
    height: 20.78461em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: currentColor;
    color: #2e4a9e;
}
.prism6__face:nth-child(3n + 1) {
    color: #243b7e;
}
.prism6__face:nth-child(1) {
    -webkit-transform: rotateX(90deg) rotateY(0deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(0deg) translateZ(2.59808em);
}
.prism6__face:nth-child(2) {
    -webkit-transform: rotateX(90deg) rotateY(60deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(60deg) translateZ(2.59808em);
}
.prism6__face:nth-child(3) {
    -webkit-transform: rotateX(90deg) rotateY(120deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(120deg) translateZ(2.59808em);
}
.prism6__face:nth-child(4) {
    -webkit-transform: rotateX(90deg) rotateY(180deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(180deg) translateZ(2.59808em);
}
.prism6__face:nth-child(5) {
    -webkit-transform: rotateX(90deg) rotateY(240deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(240deg) translateZ(2.59808em);
}
.prism6__face:nth-child(6) {
    -webkit-transform: rotateX(90deg) rotateY(300deg) translateZ(2.59808em);
    transform: rotateX(90deg) rotateY(300deg) translateZ(2.59808em);
}
.prism6__face:last-child {
    margin: -3em;
    width: 6em;
    height: 6em;
    -webkit-transform: translateZ(10.3923em) skewX(30deg) scaleY(0.86603);
    transform: translateZ(10.3923em) skewX(30deg) scaleY(0.86603);
    background: -webkit-linear-gradient(135deg, transparent 25%, currentColor 0, currentColor 75%, transparent 0);
    background: linear-gradient(-45deg, transparent 25%, currentColor 0, currentColor 75%, transparent 0);
    color: royalblue;
    -webkit-animation: inherit;
    animation: inherit;
    -webkit-animation-name: l;
    animation-name: l;
}
@-webkit-keyframes a {
    0% {
        -webkit-transform: rotateX(-25deg);
        transform: rotateX(-25deg);
    }
    100% {
        -webkit-transform: rotateX(25deg);
        transform: rotateX(25deg);
    }
}
@keyframes a {
    0% {
        -webkit-transform: rotateX(-25deg);
        transform: rotateX(-25deg);
    }
    100% {
        -webkit-transform: rotateX(25deg);
        transform: rotateX(25deg);
    }
}
@-webkit-keyframes l {
    50% {
        -webkit-filter: brightness(1.8);
        filter: brightness(1.8);
    }
}
@keyframes l {
    50% {
        -webkit-filter: brightness(1.8);
        filter: brightness(1.8);
    }
}

HTML

hex feeling blue (pure CSS 3D)

CSS3

编辑器支持Emmet

快捷键

hex feeling blue (pure CSS 3D)

CSS3

CSS3 漂亮的圆圆纠缠态LOADING动效

CSS3 带标记完成状态的圈形LOADING动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：