Neón pulsante

Abrir en el editor Publica tu código

Recomendado

30 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

Botón de neón

Reloj de neón

HTML

CSS

JS

Recomendado

Botón de neón

Reloj de neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS