Tarjeta flotante Ethereum

3,365 Andev.web

Abrir en el editor Publica tu código

Recomendado

20 August 2024

Tarjeta de bicicleta Pure CSS

18 October 2025

Ejemplo HTML de botón flotante de arcoíris

9 July 2025

Tarjeta de precios con efecto de inclinación 3D y anillo de energía

HTML

<div class="container">
    <div class="card">
      <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1"
        shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality"
        fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Layer_x0020_1">
          <metadata id="CorelCorpID_0Corel-Layer"></metadata>
          <g id="_1421394342400">
            <g>
              <polygon fill="#343434" fill-rule="nonzero"
                points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33">
              </polygon>
              <polygon fill="#3C3C3B" fill-rule="nonzero"
                points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
              <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
              <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
            </g>
          </g>
        </g>
      </svg>
      <div class="textBox">
        <p class="text head">Ethereum</p>
        <span>Cryptocurrency</span>
        <p class="text price">$2,919.87</p>
      </div>
    </div>

</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #212121; 
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; 
}
.card {
    width: 195px;
    height: 285px;
    background: #313131;
    border-radius: 20px;
    ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: 0.2s ease-in-out;
  }
  
  .img {
    height: 30%;
    position: absolute;
    transition: 0.2s ease-in-out;
    z-index: 1;
  }
  
  .textBox {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.2s ease-in-out;
    z-index: 2;
  }
  
  .textBox > .text {
    font-weight: bold;
  }
  
  .textBox > .head {
    font-size: 20px;
  }
  
  .textBox > .price {
    font-size: 17px;
  }
  
  .textBox > span {
    font-size: 12px;
    color: lightgrey;
  }
  
  .card:hover > .textBox {
    opacity: 1;
  }
  
  .card:hover > .img {
    height: 65%;
    filter: blur(7px);
    animation: anim 3s infinite;
  }
  
  @keyframes anim {
    0% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-20px);
    }
  
    100% {
      transform: translateY(0);
    }
  }
  
  .card:hover {
    transform: scale(1.04) rotate(-1deg);
  }