闪电效果,html闪电绘制文字动画特效源码 内容随便改"/>
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() *
更多推荐
html闪电效果,html闪电绘制文字动画特效源码 内容随便改
发布评论