Néon pulsé

1,801 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 January 2026

Jeu HTML de la Grande Tour Néon contre le Petit Carré

31 July 2025

Exemple de bouton néon HTML

15 May 2025

Boutons Neon

HTML

CSS

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;
        }

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();
        });