Neón pulsante

Abrir en el editor Video Publica tu código

Recomendado

15 January 2026

Juego HTML de Big NEON Tower vs Tiny Square

18 August 2024

body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000000;
            overflow: hidden;
            perspective: 1000px; 
        }

.container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
        }

.text {
            font-family: 'Arial', sans-serif;
            font-size: 1.5rem; 
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
            text-shadow: 
                0 0 10px #ff00ff,
                0 0 20px #ff00ff,
                0 0 40px #00ffff,
                0 0 80px #00ffff;
            animation: pulse 2s infinite ease-in-out, rotate3D 6s infinite linear;
            perspective: 1000px;
            position: relative;
            z-index: 1;
            transform-style: preserve-3d;
            letter-spacing: 1px;
        }

@keyframes pulse {
            0%, 100% {
                font-size: 1.5rem;
            }
            50% {
                font-size: 1.9rem; 
        }
    }

@keyframes rotate3D {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(180deg) rotateY(180deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

JS

const canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let lines = [];
        const lineCount = 9;

class NeonLine {
            constructor() {
                const textRect = document.querySelector('.text').getBoundingClientRect();
                this.textCenterX = textRect.left + textRect.width / 2;
                this.textCenterY = textRect.top + textRect.height / 2;
                
                // Posição inicial da linha (próxima ao texto)
                const angle = Math.random() * Math.PI * 2;
                const radius = textRect.width / 2 + Math.random() * 10;
                
                this.x1 = this.textCenterX + Math.cos(angle) * radius;
                this.y1 = this.textCenterY + Math.sin(angle) * radius;
                
                // Ponto final da linha (para criar uma linha em vez de um ponto)
                const lineLength = 15 + Math.random() * 9; // Linhas um pouco mais longas para destacar mais
                this.x2 = this.x1 + Math.cos(angle) * lineLength;
                this.y2 = this.y1 + Math.sin(angle) * lineLength;
                
                // Velocidade de movimento para trás (eixo Z)
                this.zSpeed = (1 + Math.random() * 2) * -1; // Negativo para ir para "trás"
                
                // Para simular o movimento no eixo Z
                this.scale = 1;
                this.opacity = 0.9 + Math.random() * 0.1; // Mais brilhante para destacar melhor
                
                this.thickness = 1.5 + Math.random() * 1.5; // Linhas um pouco mais espessas
                this.color = Math.random() > 0.5 ? '#ff00ff' : '#00ffff';
                
                // Velocidade rotacional ao redor do texto
                this.rotationSpeed = (0.01 + Math.random() * 0.02) * (Math.random() > 0.5 ? 1 : -1);
                this.rotationAngle = angle;

// Adicionar efeito de profundidade extra com blur
                this.blur = 0;
            }

update() {
                // Simula movimento no eixo Z (para "trás")
                this.scale += this.zSpeed * 0.015;
                this.opacity -= 0.01;
                
                // Rotação em torno do texto
                this.rotationAngle += this.rotationSpeed;
                
                const textRect = document.querySelector('.text').getBoundingClientRect();
                this.textCenterX = textRect.left + textRect.width / 2;
                this.textCenterY = textRect.top + textRect.height / 2;
                
                const radius = (textRect.width / 2 + Math.random() * 10) * this.scale;
                
                // Atualiza a posição dos pontos da linha
                this.x1 = this.textCenterX + Math.cos(this.rotationAngle) * radius;
                this.y1 = this.textCenterY + Math.sin(this.rotationAngle) * radius;
                
                const lineLength = (15 + Math.random() * 30) * this.scale;
                this.x2 = this.x1 + Math.cos(this.rotationAngle) * lineLength;
                this.y2 = this.y1 + Math.sin(this.rotationAngle) * lineLength;

// Aumentar o blur conforme a linha se move para "dentro"
                this.blur = (1 - this.scale) * 5;
            }

draw() {
                if (this.scale > 0 && this.opacity > 0) {
                    ctx.beginPath();
                    ctx.shadowBlur = this.blur;
                    ctx.shadowColor = this.color;
                    ctx.moveTo(this.x1, this.y1);
                    ctx.lineTo(this.x2, this.y2);
                    ctx.strokeStyle = this.color;
                    ctx.globalAlpha = this.opacity;
                    ctx.lineWidth = this.thickness * this.scale;
                    ctx.stroke();
                    ctx.shadowBlur = 0;
                    ctx.globalAlpha = 1;
                }
            }

reset() {
                return this.scale <= 0 || this.opacity <= 0;
            }
        }

function init() {
            lines = [];
            for (let i = 0; i < lineCount; i++) {
                lines.push(new NeonLine());
            }
        }

init();
        animate();

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

Neón pulsante

Recomendado

Juego HTML de Big NEON Tower vs Tiny Square

Lazo de neón

Ejemplo de botón de neón HTML

HTML

CSS

JS

Recomendado

Juego HTML de Big NEON Tower vs Tiny Square

Lazo de neón

Ejemplo de botón de neón HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS