使用CSS3变换、滤镜和背景图片构造的科幻虫洞

CSS wormhole

css3, hole

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #1e0059;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    -webkit-perspective: 5em;
    perspective: 5em;
}
body::after {
    background-color: inherit;
    border-radius: 50%;
    box-shadow: 0 0 2em 2em #1e0059;
    content: "";
    height: 1em;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1em;
}
.cylinder {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: tunnel;
    animation-name: tunnel;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotatex(90deg) rotatey(0) translatey(-25em);
    transform: rotatex(90deg) rotatey(0) translatey(-25em);
}
.cylinder:nth-child(1) {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}
.cylinder:nth-child(2) {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
.side {
    background-image: url(/uploads/1705/fractal-fire-sky-seamless-background.jpg);
    background-size: 32em 10em;
    -webkit-filter: hue-rotate(-11.25deg);
    filter: hue-rotate(-11.25deg);
    height: 40em;
    position: absolute;
    -webkit-transform-origin: 0;
    transform-origin: 0;
    width: 2em;
}
.side:nth-child(1) {
    background-position: -2em;
    -webkit-transform: rotatey(22.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(22.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(2) {
    background-position: -4em;
    -webkit-transform: rotatey(45deg) translate3d(-50%, 0, 5em);
    transform: rotatey(45deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(3) {
    background-position: -6em;
    -webkit-transform: rotatey(67.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(67.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(4) {
    background-position: -8em;
    -webkit-transform: rotatey(90deg) translate3d(-50%, 0, 5em);
    transform: rotatey(90deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(5) {
    background-position: -10em;
    -webkit-transform: rotatey(112.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(112.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(6) {
    background-position: -12em;
    -webkit-transform: rotatey(135deg) translate3d(-50%, 0, 5em);
    transform: rotatey(135deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(7) {
    background-position: -14em;
    -webkit-transform: rotatey(157.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(157.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(8) {
    background-position: -16em;
    -webkit-transform: rotatey(180deg) translate3d(-50%, 0, 5em);
    transform: rotatey(180deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(9) {
    background-position: -18em;
    -webkit-transform: rotatey(202.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(202.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(10) {
    background-position: -20em;
    -webkit-transform: rotatey(225deg) translate3d(-50%, 0, 5em);
    transform: rotatey(225deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(11) {
    background-position: -22em;
    -webkit-transform: rotatey(247.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(247.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(12) {
    background-position: -24em;
    -webkit-transform: rotatey(270deg) translate3d(-50%, 0, 5em);
    transform: rotatey(270deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(13) {
    background-position: -26em;
    -webkit-transform: rotatey(292.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(292.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(14) {
    background-position: -28em;
    -webkit-transform: rotatey(315deg) translate3d(-50%, 0, 5em);
    transform: rotatey(315deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(15) {
    background-position: -30em;
    -webkit-transform: rotatey(337.5deg) translate3d(-50%, 0, 5em);
    transform: rotatey(337.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(16) {
    background-position: -32em;
    -webkit-transform: rotatey(360deg) translate3d(-50%, 0, 5em);
    transform: rotatey(360deg) translate3d(-50%, 0, 5em);
}
.cylinder:nth-child(2) .side {
    opacity: 0.625;
}
@-webkit-keyframes tunnel {
    100% {
        -webkit-transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
        transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
    }
}
@keyframes tunnel {
    100% {
        -webkit-transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
        transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
    }
}

HTML

CSS wormhole

css3, hole

编辑器支持Emmet

快捷键

CSS wormhole

css3, hole

使用CSS3变换和图片构建的3D交互式家居

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：