Página de equipos - Diseño futurista

1172 alejandrokundrah

Abrir en el editor Video Publica tu código

Recomendado

16 January 2025

Ejemplo de página de destino de sitio web de películas

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

12 December 2025

Código fuente del juego HTML5 Eggy Car

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
}
canvas#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
.container {
  position: relative;
  z-index: 10;
  padding: 4rem;
  text-align: center;
}
.title {
  font-size: 3rem;
  color: #0ff;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #0ff;
}
.card-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.team-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #0ff;
  padding: 2rem;
  width: 220px;
  border-radius: 15px;
  perspective: 1000px;
  box-shadow: 0 0 20px #0ff, 0 0 30px #00f;
  transition: transform 0.2s;
  cursor: pointer;
  transform-style: preserve-3d;
}
.team-card:hover {
  animation: pulse 1s infinite alternate;
}
.team-card img {
  width: 100px;
  border-radius: 50%;
  border: 3px solid #0ff;
  margin-bottom: 1rem;
}
.team-card h2 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
.team-card p {
  color: #aaa;
  font-size: 0.9rem;
}
@keyframes pulse {
  from {
    box-shadow: 0 0 10px #0ff;
  }
  to {
    box-shadow: 0 0 20px #0ff, 0 0 30px #0f0;
  }
}

JS

const cards = document.querySelectorAll('.team-card');

// 3D Tilt effect
cards.forEach(card => {
  card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;
    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = `rotateX(0deg) rotateY(0deg)`;
  });
});

// Particles background
const canvas = document.getElementById("bgCanvas");
const ctx = canvas.getContext("2d");
let particlesArray;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

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

function Particle(){
  this.x = Math.random() * canvas.width;
  this.y = Math.random() * canvas.height;
  this.size = Math.random() * 2 + 0.5;
  this.speedX = Math.random() * 1 - 0.5;
  this.speedY = Math.random() * 1 - 0.5;
  this.color = '#0ff';

this.update = function(){
    this.x += this.speedX;
    this.y += this.speedY;
    if(this.x < 0 || this.x > canvas.width) this.speedX *= -1;
    if(this.y < 0 || this.y > canvas.height) this.speedY *= -1;
  }

this.draw = function(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

function init(){
  particlesArray = [];
  for(let i = 0; i < 100; i++){
    particlesArray.push(new Particle());
  }
}

function animate(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for(let i = 0; i < particlesArray.length; i++){
    particlesArray[i].update();
    particlesArray[i].draw();
  }
  requestAnimationFrame(animate);
}

init();
animate();

Recomendado

Ejemplo de página de destino de sitio web de películas

Reproductor de juegos Flash con emulador Ruffle

Código fuente del juego HTML5 Eggy Car

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS