¿Cómo puedo poner la animación en mi bordeado elemento html con css, pero NO es la frontera de animar así?

Question 1

¿Cómo puedo poner la animación en mi bordeado elemento html con css, pero NO es la frontera de animar así? Lo que sucede ahora es toda la cosa se anima. Aquí está el código:

.pageName{
   width: 14.0vh;
   padding: 1.5vh 1.5vh 1.5vh 3.5vh;
   font-family: Monaco;
   font-weight: bold;
   font-size: 2.0vh;
   color: #006400;
    margin: auto;
    animation: blinker 5s linear infinite;
    border-width: 0.5vh;
    border-style: double;
    border-radius: 1.0vh;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

<div class="pageName">Title Page</div>

Gracias!

Question 2

Usted sólo puede separar y mover el texto en un span y aplicar la animación a la span. Véase el siguiente fragmento.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

  <div class="pageName"><span>Title Page</span></div>

</body>

</html>

Por alguna razón en el fragmento de código del editor, el diseño se cometa un error, pero si copia el marcado y ejecutar de forma local se debe mirar como se diseñó.

Question 3

Trate de envolver el div que usted tiene con un contenedor de destino y sólo la interna div con la animación

.container {
    width: 14.0vh;
    padding: 1.5vh 1.5vh 1.5vh 3.5vh;
    font-family: Monaco;
    font-weight: bold;
    font-size: 2.0vh;
    color: #006400;
     margin: auto;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

<div class="container">
    <div class="pageName">Title Page</div>
  </div>

Authentic Science · Answer 1 · 2021-11-23T02:39:45

Usted sólo puede separar y mover el texto en un span y aplicar la animación a la span. Véase el siguiente fragmento.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

  <div class="pageName"><span>Title Page</span></div>

</body>

</html>

Por alguna razón en el fragmento de código del editor, el diseño se cometa un error, pero si copia el marcado y ejecutar de forma local se debe mirar como se diseñó.

Santiago Sierra · Answer 2 · 2021-11-23T02:34:23

Trate de envolver el div que usted tiene con un contenedor de destino y sólo la interna div con la animación

.container {
    width: 14.0vh;
    padding: 1.5vh 1.5vh 1.5vh 3.5vh;
    font-family: Monaco;
    font-weight: bold;
    font-size: 2.0vh;
    color: #006400;
     margin: auto;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

<div class="container">
    <div class="pageName">Title Page</div>
  </div>

¿Cómo puedo poner la animación en mi bordeado elemento html con css, pero NO es la frontera de animar así?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría