HTML5数字艺术 - 炫彩辐射线变换动画

Irradiation。使用CSS3 filter: hue-rotate等方法制作出来的超炫丽的背景动画图案。

svg, css3, filter

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

///
(function() {
    function Circle(config) {
        this.x = config.x || 0;
        this.y = config.y || 0;
        this.radius = config.radius || 40;
        this.numPoints = this.radius * Math.PI / 8;
        this.delta = this.radius / 20.5;
        this.points = this.getPoints();
        this.colour = this.getColour();
    }

Circle.prototype = {
        getPoints: function() {
            var points = [];
            var x, y;
            for (var i = 0; i < this.numPoints; i++) {
                x = (Math.random() * this.delta) - (this.delta / 2);
                y = (Math.random() * this.delta) - (this.delta / 2);
                points[i] = {
                    x: x,
                    y: y
                };
            }
            return points;
        },
        getColour: function() {
            var r = Math.floor(Math.random() * 240);
            var g = Math.floor(Math.random() * 245);
            var b = Math.floor(Math.random() * 225);
            var a = (Math.random() * 0.2) + 0.1;
            return "rgba(" + r + "," + g + "," + b + "," + a + ")";
        },
        draw: function(ctx) {
            ctx.save();
            ctx.lineWidth = Math.round(this.radius / 350);
            ctx.strokeStyle = this.colour;
            ctx.fillStyle = this.colour;
            ctx.beginPath();

var progress, x, y;
            x = this.x + (this.radius + this.points[0].x) * Math.cos(0);
            y = this.y + (this.radius + this.points[0].y) * Math.sin(0);
            ctx.moveTo(x, y);
            for (var i = 1; i < this.numPoints; i++) {
                progress = 4 * Math.PI / this.numPoints * i;
                x = this.x + (this.radius + this.points[i].x) * Math.cos(progress);
                y = this.y + (this.radius + this.points[i].y) * Math.sin(progress);
                ctx.lineTo(x, y);
            }

ctx.fill();
            //ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
    };

window.Circle = Circle;
})();

var can = document.getElementById("canvas");
can.width = window.innerWidth;
can.height = window.innerHeight;
var ctx = can.getContext("2d");

var NUMBER = Math.round(1000);
for (var i = 0; i < NUMBER; i++) {
    var circle = new Circle({
        x: Math.random() * can.width,
        y: Math.random() * can.height,
        radius: Math.round(Math.random() * (Math.min(can.width, can.height) / 10))
    });
    circle.draw(ctx);
    ctx.globalCompositeOperation = "overlay";
}

///////

编译

CSS

body,
html,
ul {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
ul {
    -webkit-perspective: 300px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background: -webkit-radial-gradient(#b8ffff, rgba(255, 158, 255, 0.95) 30%);
    background: radial-gradient(#b8ffff, rgba(255, 158, 255, 0.95) 30%);
    -webkit-animation: hue 10s cubic-bezier(0.001, 0.33, 0.003, -1.33) infinite alternate;
    animation: hue 10s cubic-bezier(0.001, 0.33, 0.003, -1.33) infinite alternate;
}
@-webkit-keyframes hue {
    50% {
        -webkit-filter: hue-rotate(360deg) contrast(1.9) opacity(0.8);
        filter: hue-rotate(360deg) contrast(1.9) opacity(0.8);
        -webkit-perspective: 200px;
    }
}
@keyframes hue {
    50% {
        -webkit-filter: hue-rotate(360deg) contrast(1.9) opacity(0.8);
        filter: hue-rotate(360deg) contrast(1.9) opacity(0.8);
        -webkit-perspective: 200px;
    }
}
#canvas {
    position: absolute;
    z-index: 2;
    -webkit-filter: brightness(1.1) contrast(1.7);
    filter: brightness(1.1) contrast(1.7);
}
#paper {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    mix-blend-mode: screen;
}
#poper {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: color-burn;
}
li {
    display: block;
    height: 450px;
    width: 450px;
    z-index: 8;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -225px auto auto -225px;
    background: 50% 50% no-repeat;
    background-size: 100%;
    -webkit-animation: move 117s infinite ease -78s alternate;
    border-radius: 100%;
}
li:nth-child(4n) {
    background-image: url("/uploads/161101/caroussel9white.png");
}
li:nth-child(4n+1) {
    background-image: url("/uploads/161101/caroussel9white.png");
    z-index: 7;
}
li:nth-child(4n+2) {
    background-image: url("/uploads/161101/caroussel9white.png");
    z-index: 6;
}
li:nth-child(4n+3) {
    background-image: url("/uploads/161101/caroussel9white.png");
    z-index: 5;
}
.l2 {
    -webkit-animation-delay: -146.25s;
}
.l3 {
    -webkit-animation-delay: -136.5s;
}
.l4 {
    -webkit-animation-delay: -126.75s;
}
.l5 {
    -webkit-animation-delay: -117s;
}
.l6 {
    -webkit-animation-delay: -107.25s;
}
.l7 {
    -webkit-animation-delay: -97.5s;
}
.l8 {
    -webkit-animation-delay: -87.75s;
}
.l9 {
    -webkit-animation-delay: -78s;
}
.l10 {
    -webkit-animation-delay: -68.25s;
}
.l11 {
    -webkit-animation-delay: -58.5s;
}
.l12 {
    -webkit-animation-delay: -48.75s;
}
.l13 {
    -webkit-animation-delay: -39s;
}
.l14 {
    -webkit-animation-delay: -29.25s;
}
.l15 {
    -webkit-animation-delay: -19.5s;
}
.l16 {
    -webkit-animation-delay: -9.75s;
}
@-webkit-keyframes move {
    from {
        -webkit-transform: rotateZ(0deg) translateZ(-1200px);
        opacity: 0;
        mix-blend-mode: multiply;
    }
    20%,
    30% {
        opacity: 0;
    }
    55% {
        opacity: 0.7;
        z-index: 2;
        -webkit-filter: inver(1);
        filter: inver(1);
    }
    to {
        -webkit-transform: rotateZ(180deg) translateZ(10.05926vw);
        opacity: 0;
        mix-blend-mode: multiply;
    }
}

HTML

Irradiation。使用CSS3 filter: hue-rotate等方法制作出来的超炫丽的背景动画图案。

svg, css3, filter

编辑器支持Emmet

快捷键

Irradiation。使用CSS3 filter: hue-rotate等方法制作出来的超炫丽的背景动画图案。

svg, css3, filter

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

HTML5 SVG在文章中使用钢笔圈词画线连接的动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：