熊猫宇航员和3D炫彩星云

css, transform, cloud

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const world = document.getElementById('world');
const viewport = document.getElementById('viewport');
const d = 0;
const p = 400;

let worldYAngle = 0
let worldXAngle = 0;
let objects = [];
let layers = [];

viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p;
viewport.style.oPerspective = p;

window.addEventListener('mousemove', onMouseMove);
window.addEventListener('touchmove', onMouseMove);

function onMouseMove(e) {
    e.preventDefault();
    let x = e.clientX || e.touches[0].clientX;
    let y = e.clientY || e.touches[0].clientY;
    worldYAngle = -(0.5 - (x / window.innerWidth)) * 180;
    worldXAngle = (0.5 - (y / window.innerHeight)) * 180;
    updateView();
}

function generate() {
    //removes previous clouds
    objects = [];
    layers = [];

if (world.hasChildNodes()) {
        while (world.childNodes.length >= 1) {
            world.removeChild(world.firstChild);
        }
    }

//adds new clouds
    for (let j = 0; j < 5; j++) {
        objects.push(createCloud());
    }
}

function randomizer(range) {
    let randomX = Math.floor(Math.random() * range) + 1;
    randomX *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
    return randomX;
}

function createCloud() {
    const random_x = randomizer(256);
    const random_y = randomizer(256);
    const random_z = randomizer(256);

for (let j = 0; j < 5 + Math.round(Math.random() * 10); j++) {
        const cloud = document.createElement('img');
        cloud.style.opacity = 0.8;
        let x = Math.floor((Math.random() * 3) + 1);

if (x === 1) {
            cloud.setAttribute('src', '/uploads/1905/cloud.png');
        } else if (x === 2) {
            cloud.setAttribute('src', '/uploads/1905/cloud2.png');
        } else {
            cloud.setAttribute('src', '/uploads/1905/cloud3.png');
        }
        cloud.className = 'cloudLayer';

cloud.data = {
            x: randomizer(random_x),
            y: randomizer(random_y),
            z: randomizer(100),
            a: Math.round(Math.random() * 360),
            s: 0.25 + Math.random(),
            speed: 0.1 * Math.random()
        };

div.appendChild(cloud);
        layers.push(cloud);
    }
    return div;
}

function addPanda() {
    let randomCloud = layers[Math.floor(Math.random() * layers.length)];
    randomCloud.setAttribute('src', '/uploads/1905/panda.png');
    randomCloud.style.opacity = 1;
}

generate();
addPanda();
update();

编译

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#viewport {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #000000;
    background: -moz-linear-gradient(top, #000000 0%, #261423 100%);
    background: -webkit-linear-gradient(top, #000000 0%, #261423 100%);
    background: linear-gradient(to bottom, #000000 0%, #261423 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#261423', GradientType=0);
}
#world {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -256px;
    margin-top: -256px;
    height: 512px;
    width: 512px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
}
#world div {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
}
.cloudBase {
    height: 20px;
    left: 256px;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    top: 256px;
    width: 20px;
}
.cloudLayer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 256px;
    height: 256px;
    margin-left: -128px;
    margin-top: -128px;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

HTML

css, transform, cloud

编辑器支持Emmet

快捷键

css, transform, cloud

使用CSS3制作逼真的3D云彩动画特效

WebGL Three.js 3D云彩生成示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：