HTML5 独一无二的地球指环

使用50个DIV沿3D环形位置拼接而成。

ring,earth,halo

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #050505;
    overflow: hidden;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    padding-top: 250px;
}
.ring {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 35%;
    width: 80px;
    height: 30px;
    margin-left: -50px;
    -webkit-transform-origin: 50% 50% 398px;
    -ms-transform-origin: 50% 50% 398px;
    transform-origin: 50% 50% 398px;
    -webkit-animation: spin 60s linear infinite;
    animation: spin 60s linear infinite;
}
.inner,
.outer {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(30deg);
    transform: rotateY(30deg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.inner .section,
.outer .section {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: rotateX(7.2deg);
    transform: rotateX(7.2deg);
    top: 100%;
}
.inner .section-1,
.outer .section-1 {
    background-position: left -50px;
}
.inner .section-2,
.outer .section-2 {
    background-position: left -100px;
}
.inner .section-3,
.outer .section-3 {
    background-position: left -150px;
}
.inner .section-4,
.outer .section-4 {
    background-position: left -200px;
}
.inner .section-5,
.outer .section-5 {
    background-position: left -250px;
}
.inner .section-6,
.outer .section-6 {
    background-position: left -300px;
}
.inner .section-7,
.outer .section-7 {
    background-position: left -350px;
}
.inner .section-8,
.outer .section-8 {
    background-position: left -400px;
}
.inner .section-9,
.outer .section-9 {
    background-position: left -450px;
}
.inner .section-10,
.outer .section-10 {
    background-position: left -500px;
}
.inner .section-11,
.outer .section-11 {
    background-position: left -550px;
}
.inner .section-12,
.outer .section-12 {
    background-position: left -600px;
}
.inner .section-13,
.outer .section-13 {
    background-position: left -650px;
}
.inner .section-14,
.outer .section-14 {
    background-position: left -700px;
}
.inner .section-15,
.outer .section-15 {
    background-position: left -750px;
}
.inner .section-16,
.outer .section-16 {
    background-position: left -800px;
}
.inner .section-17,
.outer .section-17 {
    background-position: left -850px;
}
.inner .section-18,
.outer .section-18 {
    background-position: left -900px;
}
.inner .section-19,
.outer .section-19 {
    background-position: left -950px;
}
.inner .section-20,
.outer .section-20 {
    background-position: left -1000px;
}
.inner .section-21,
.outer .section-21 {
    background-position: left -1050px;
}
.inner .section-22,
.outer .section-22 {
    background-position: left -1100px;
}
.inner .section-23,
.outer .section-23 {
    background-position: left -1150px;
}
.inner .section-24,
.outer .section-24 {
    background-position: left -1200px;
}
.inner .section-25,
.outer .section-25 {
    background-position: left -1250px;
}
.inner .section-26,
.outer .section-26 {
    background-position: left -1300px;
}
.inner .section-27,
.outer .section-27 {
    background-position: left -1350px;
}
.inner .section-28,
.outer .section-28 {
    background-position: left -1400px;
}
.inner .section-29,
.outer .section-29 {
    background-position: left -1450px;
}
.inner .section-30,
.outer .section-30 {
    background-position: left -1500px;
}
.inner .section-31,
.outer .section-31 {
    background-position: left -1550px;
}
.inner .section-32,
.outer .section-32 {
    background-position: left -1600px;
}
.inner .section-33,
.outer .section-33 {
    background-position: left -1650px;
}
.inner .section-34,
.outer .section-34 {
    background-position: left -1700px;
}
.inner .section-35,
.outer .section-35 {
    background-position: left -1750px;
}
.inner .section-36,
.outer .section-36 {
    background-position: left -1800px;
}
.inner .section-37,
.outer .section-37 {
    background-position: left -1850px;
}
.inner .section-38,
.outer .section-38 {
    background-position: left -1900px;
}
.inner .section-39,
.outer .section-39 {
    background-position: left -1950px;
}
.inner .section-40,
.outer .section-40 {
    background-position: left -2000px;
}
.inner .section-41,
.outer .section-41 {
    background-position: left -2050px;
}
.inner .section-42,
.outer .section-42 {
    background-position: left -2100px;
}
.inner .section-43,
.outer .section-43 {
    background-position: left -2150px;
}
.inner .section-44,
.outer .section-44 {
    background-position: left -2200px;
}
.inner .section-45,
.outer .section-45 {
    background-position: left -2250px;
}
.inner .section-46,
.outer .section-46 {
    background-position: left -2300px;
}
.inner .section-47,
.outer .section-47 {
    background-position: left -2350px;
}
.inner .section-48,
.outer .section-48 {
    background-position: left -2400px;
}
.inner .section-49,
.outer .section-49 {
    background-position: left -2450px;
}
.inner .section-50,
.outer .section-50 {
    background-position: left -2500px;
}
.inner {
    z-index: 2;
}
.inner .section {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-image: url(/uploads/160101/halo-inner.jpg);
}
.outer {
    z-index: 1;
}
.outer .section {
    background-image: url(/uploads/160101/halo-outer.jpg);
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotateY(-1turn);
        transform: rotateY(-1turn);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotateY(-1turn);
        transform: rotateY(-1turn);
    }
}

HTML

使用50个DIV沿3D环形位置拼接而成。

ring,earth,halo

编辑器支持Emmet

快捷键

使用50个DIV沿3D环形位置拼接而成。

ring,earth,halo

HTML5奇怪的波动指环

Earth2050 - WebGL流浪地球特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：