Neón pulsante

Abrir en el editor Publica tu código

Recomendado

21 June 2024

Interruptor de palanca de neón

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

Interruptor de palanca de neón

Botón de neón

Efecto de texto neón

HTML

CSS

JS

Recomendado

Interruptor de palanca de neón

Botón de neón

Efecto de texto neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS