html闪电效果,html闪电绘制文字动画特效源码 内容随便改

代码附上html>

html5 canvas闪电绘制文字动画特效

.page-thunder-to-text {

position: relative;

overflow: hidden;

}

.page-thunder-to-text canvas {

display: block;

}

.page-thunder-to-text input {

position: absolute;

bottom: 50px;

left: 0;

right: 0;

display: block;

outline: none;

background-color: rgba(38, 50, 56, 0.2);

color: #ffffff;

border: none;

width: 50%;

min-width: 500px;

max-width: 100%;

margin: auto;

height: 60px;

line-height: 60px;

font-size: 40px;

padding: 0 20px;

}

.page-thunder-to-text input:hover, .page-thunder-to-text input:focus {

border: 1px solid rgba(38, 50, 56, 0.6);

}

.page-thunder-to-text input::-webkit-input-placeholder {

color: rgba(255, 255, 255, 0.1);

}

let canvas, ctx, w, h, thunder, text, particles, input;

function Thunder(options) {

options = options || {};

this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);

this.maxlife = this.lifespan;

this.color = options.color || '#fefefe';

this.glow = options.glow || '#2323fe';

this.x = options.x || Math.random() * w;

this.y = options.y || Math.random() * h;

this.width = options.width || 2;

this.direct = options.direct || Math.random() * Math.PI * 2;

this.max = options.max || Math.round(Math.random() * 10 + 20);

this.segments = [...new Array(this.max)].map(() => {

return {

direct: this.direct + (Math.PI * Math.random() *