CSS 3D钛战机的线框图动画

CSS 3D Tie Fighter Wireframe

css3, wireframe

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    height: 100%;
    background-color: #002;
    background-image: linear-gradient(#112 2px, transparent 2px), linear-gradient(90deg, #112 2px, transparent 2px), linear-gradient(#112 1px, transparent 1px), linear-gradient(90deg, #112 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.wrapper {
    margin: 200px;
    perspective: 2000px;
    perspective-origin: 50%;
    transform: scale(.5);
}
.sphere {
    animation: spin 5s infinite linear;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    width: 200px;
}
.sphere .circle {
    border: solid 2px #666;
    border-radius: 50%;
    box-sizing: border-box;
    height: 200px;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    width: 200px;
}
.sphere:before {
    border: solid 2px #666;
    border-radius: 50%;
    content: "";
    height: 100px;
    left: 50px;
    position: absolute;
    top: 50px;
    transform: translateZ(-80px);
    width: 100px;
}
.sphere:after {
    border: solid 2px #666;
    border-radius: 50%;
    content: "";
    height: 60px;
    left: 70px;
    position: absolute;
    top: 70px;
    transform: translateZ(-90px);
    width: 60px;
}
.sphere .equator {
    transform: rotateX(90deg);
}
.sphere .tropic {
    height: 172px;
    margin: 14px;
    width: 172px;
}
.sphere .cancer {
    transform: translateY(-50px) rotateX(90deg);
}
.sphere .capricorn {
    transform: translateY(50px) rotateX(90deg);
}
@keyframes spin {
    0% {
        transform: rotateY(0deg) rotateX(15deg);
    }
    50% {
        transform: rotateY(180deg) rotateX(-15deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(15deg);
    }
}
.axle {
    border: solid 2px #666;
    height: 20px;
    left: -120px;
    position: absolute;
    right: -120px;
    top: 80px;
    transform: translateZ(-10px);
}
.axle + .axle {
    transform: translateZ(10px);
}
.left-wing {
    transform: rotateY(90deg) translateY(-90px) translateZ(140px) scale(2.5);
}
.right-wing {
    transform: rotateY(90deg) translateY(-90px) translateZ(-300px) scale(2.5);
}
.hexagon {
    height: 200px;
    left: 0;
    margin: 5em;
    /*   outline:dotted 1px #ccc; */
    
    position: absolute;
    top: 0;
    width: 200px;
}
.hexagon .rect {
    border-bottom: solid 1px #666;
    border-top: solid 1px #666;
    box-sizing: border-box;
    height: 200px;
    left: 43px;
    position: absolute;
    top: 0;
    width: 115px;
}
.hexagon .nw-se {
    transform: rotateZ(60deg);
}
.hexagon .sw-ne {
    transform: rotateZ(-60deg);
}
.hexagon .rect:after {
    border-left: solid 1px #666;
    content: "";
    height: 230px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-30deg);
    transform-origin: top left;
    width: 115px;
    z-index: 1;
}

HTML

CSS 3D Tie Fighter Wireframe

css3, wireframe

编辑器支持Emmet

快捷键

CSS 3D Tie Fighter Wireframe

css3, wireframe

CSS3 边框线形成的LOADING动画

CSS3 黄昏时分飞行的战机动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：