Canvas 三角形漩涡动画

Canvas vortex of triangles

canvas, triangle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

var expanse = document.getElementById("expanse");
var context = expanse.getContext("2d");
expanse.width = window.innerWidth;
expanse.height = window.innerHeight;
var triangles = [];
var triangleCount = 500;
var mouseX, mouseY;

//MULTIPLO beta
for (var i = 0; i < triangleCount; i++) {
    setTimeout(function() {
        triangles.push(new triangle());
    }, randomIntFromInterval(1, 15000));
}
var rotationSpeed = Math.PI / 60;
var rotation = 0;
var colors = ["#16a085", "#c0392b", "#f39c12"];

function triangle() {
    this.dim = randomIntFromInterval(50, 120);
    this.angle = randomIntFromInterval(515, 525);
    this.angleBase = this.angle;
    this.spirx;
    this.color = colors[randomIntFromInterval(0, colors.length)];
    this.spiry;
    this.dinAngle;
    this.speed = randomIntFromInterval(4, 7);
    this.a = 0;
    this.b = randomIntFromInterval(60, 85);
    this.centerx = expanse.width / 2;
    this.centery = expanse.height / 2;
    this.mouseHelper = 0;
}

function loop() {
    requestAnimationFrame(loop);
    draw();
}

function draw() {
    context.clearRect(0, 0, expanse.width, expanse.height);

for (var i = 0; i < triangles.length; i++) {
        var p = triangles[i];
        p.angle -= 1;

//Resize
        var remove = 0.1;
        if (p.dim > 30) {
            remove = 0.2
        }
        if (p.angle < 200) {
            remove = 0.2;
            if (p.dim > 30) {
                remove = 0.4;
            }
        }
        if (p.angle < 80) {
            remove = 0.3;
            if (p.dim > 30) {
                remove = 0.6;
            }
        }

p.dim = p.dim - remove;
        p.altezzaFigura = p.dim;

if (p.angle < -10) {
            triangles[i] = new triangle();
        }

if (p.dim < 0.05) {
            triangles[i] = new triangle();
        }

p.dinAngle = 0.01 * p.angle / (p.speed * 0.1);
        p.spirx = p.centerx + (p.a + p.b * p.dinAngle) * Math.cos(p.dinAngle);
        p.spiry = p.centery + (p.a + p.b * p.dinAngle) * Math.sin(p.dinAngle);

context.fillStyle = p.color;
        if (mouseX > p.spirx - 20 && mouseX < p.spirx + 60 && mouseY > p.spiry - 40 && mouseY < p.spiry + 90) {
            p.color = "#f39c12";

}
        context.beginPath();
        context.moveTo(p.spirx + (p.dim - p.dim / 4), p.spiry + (p.dim / 2));
        context.lineTo(p.spirx + p.dim, p.spiry + (p.dim - p.dim / 10));
        context.lineTo(p.spirx + (p.dim + p.dim / 4), p.spiry + (p.dim / 2));
        context.fill();
        context.restore();
    }
}

window.addEventListener("resize", function() {
    expanse.width = window.innerWidth;
    expanse.height = window.innerHeight;
});

loop();

编译

CSS

body {
    background: #ecf0f1;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    /* cursor: none; */
}
body #logo {
    position: fixed;
    z-index: -2;
    top: calc( 50% - 10px);
    left: calc( 50% - 95px);
}
* {
    box-sizing: border-box;
}
#logo-wrapper {
    position: fixed;
    top: calc( 50vh - 50px);
    left: calc( 50vw - 220px);
}
body {
    background: #222a2c;
}
.loading {
    opacity: 0;
    height: 0px;
}
.letter-wrapper {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
}
.d .slice:nth-child(4) {
    background-color: #e7be3c;
    z-index: 25;
}
.d .slice:nth-child(1) {
    z-index: 29;
}
.d .slice:nth-child(2) {
    z-index: 28;
}
.d .slice:nth-child(3) {
    z-index: 27;
}
.d .slice {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49px;
    border: 49px solid transparent;
    border-left-width: 29px;
    border-right-width: 29px;
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%);
}
.d .slice:nth-child(1) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    animation: d-sparkleLoad-1 2s 0.07s forwards;
    animation-delay: 4s;
}
.d .slice:nth-child(2) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    border-top-color: #e7693c;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    animation: d-sparkleLoad-2 2s 0.14s forwards;
    animation-delay: 4s;
}
.d .slice:nth-child(3) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    border-top-color: #e7853c;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    animation: d-sparkleLoad-3 2s 0.21s forwards;
    animation-delay: 4s;
}
.d .slice:nth-child(4) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    border-top-color: #e7a23c;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    animation: d-sparkleLoad-4 2s 0.28s forwards;
    animation-delay: 4s;
}
@keyframes d-sparkleLoad-1 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
@keyframes d-sparkleLoad-2 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
}
@keyframes d-sparkleLoad-3 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
}
@keyframes d-sparkleLoad-4 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
}
.o .slice {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49px;
    border: 49px solid transparent;
    border-left-width: 29px;
    border-right-width: 29px;
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%);
}
.o .slice:nth-child(1) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    animation: o-sparkleLoad-1 2s 0.07s forwards;
    animation-delay: 5s;
}
.o .slice:nth-child(2) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    border-top-color: #e7693c;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    animation: o-sparkleLoad-2 2s 0.14s forwards;
    animation-delay: 5s;
}
.o .slice:nth-child(3) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    border-top-color: #e7853c;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    animation: o-sparkleLoad-3 2s 0.21s forwards;
    animation-delay: 5s;
}
.o .slice:nth-child(4) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    border-top-color: #e7a23c;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    animation: o-sparkleLoad-4 2s 0.28s forwards;
    animation-delay: 5s;
}
.o .slice:nth-child(5) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(240deg) scale(0);
    border-top-color: #e7be3c;
    transform: translate(-50%, -50%) rotate(240deg) scale(0);
    animation: o-sparkleLoad-5 2s 0.35s forwards;
    animation-delay: 5s;
}
.o .slice:nth-child(6) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(300deg) scale(0);
    border-top-color: #e7db3c;
    transform: translate(-50%, -50%) rotate(300deg) scale(0);
    animation: o-sparkleLoad-6 2s 0.42s forwards;
    animation-delay: 5s;
}
.o2 .slice:nth-child(1) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    animation: o-sparkleLoad-1 2s 0.07s forwards;
    animation-delay: 7s !important;
}
.o2 .slice:nth-child(2) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    border-top-color: #e7693c;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    animation: o-sparkleLoad-2 2s 0.14s forwards;
    animation-delay: 7s !important;
}
.o2 .slice:nth-child(3) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    border-top-color: #e7853c;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    animation: o-sparkleLoad-3 2s 0.21s forwards;
    animation-delay: 7s !important;
}
.o2 .slice:nth-child(4) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    border-top-color: #e7a23c;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    animation: o-sparkleLoad-4 2s 0.28s forwards;
    animation-delay: 7s !important;
}
.o2 .slice:nth-child(5) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(240deg) scale(0);
    border-top-color: #e7be3c;
    transform: translate(-50%, -50%) rotate(240deg) scale(0);
    animation: o-sparkleLoad-5 2s 0.35s forwards;
    animation-delay: 7s !important;
}
.o2 .slice:nth-child(6) {
    animation-delay: 1s;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(300deg) scale(0);
    border-top-color: #e7db3c;
    transform: translate(-50%, -50%) rotate(300deg) scale(0);
    animation: o-sparkleLoad-6 2s 0.42s forwards;
    animation-delay: 7s !important;
}
@keyframes o-sparkleLoad-1 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
@keyframes o-sparkleLoad-2 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
}
@keyframes o-sparkleLoad-3 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
}
@keyframes o-sparkleLoad-4 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
}
@keyframes o-sparkleLoad-5 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(240deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(240deg) scale(1);
    }
}
@keyframes o-sparkleLoad-6 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(300deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(300deg) scale(1);
    }
}
.j .slice {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49px;
    border: 49px solid transparent;
    border-left-width: 29px;
    border-right-width: 29px;
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%);
}
.j .slice:first-child,
.j .slice:last-child {
    border-top-color: #222a2c !important;
}
.j .slice:nth-child(1) {
    opacity: 0;
    border-top-color: #e74c3c;
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    animation: j-sparkleLoad-1 2s 0.07s forwards;
    animation-delay: 6s;
}
.j .slice:nth-child(2) {
    opacity: 0;
    border-top-color: #e7693c;
    transform: translate(-50%, -50%) rotate(60deg) scale(0);
    animation: j-sparkleLoad-2 2s 0.14s forwards;
    animation-delay: 6s;
}
.j .slice:nth-child(3) {
    opacity: 0;
    border-top-color: #e7853c;
    transform: translate(-50%, -50%) rotate(120deg) scale(0);
    animation: j-sparkleLoad-3 2s 0.21s forwards;
    animation-delay: 6s;
}
.j .slice:nth-child(4) {
    opacity: 0;
    border-top-color: #e7a23c;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    animation: j-sparkleLoad-4 2s 0.28s forwards;
    animation-delay: 6s;
}
.j .slice:nth-child(5) {
    opacity: 0;
    border-top-color: #e7be3c;
    transform: translate(-50%, -50%) rotate(240deg) scale(0);
    animation: j-sparkleLoad-5 2s 0.35s forwards;
    animation-delay: 6s;
}
@keyframes j-sparkleLoad-1 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
@keyframes j-sparkleLoad-2 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
}
@keyframes j-sparkleLoad-3 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(120deg) scale(1);
    }
}
@keyframes j-sparkleLoad-4 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }
}
@keyframes j-sparkleLoad-5 {
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(240deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(240deg) scale(1);
    }
}

HTML

Canvas vortex of triangles

canvas, triangle

编辑器支持Emmet

快捷键

Canvas vortex of triangles

canvas, triangle

Canvas 三角蛇形发散动画

Canvas 三角形切片效果动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：