Jak mohu dát animace do mého hraničí prvku html s css, ale NE, že to je hranice animovat stejně?

Question 1

Jak mohu dát animace do mého hraničí prvku html s css, ale NE, že to je hranice animovat stejně? Co se stane nyní je to celé oživuje. Zde je kód:

.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>

Děkuji!!!

Question 2

Můžete oddělit a přesunout text do span a aplikovat animace na span. Viz úryvek níže.

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

Pro některé důvod, proč v kódu editor, layout dostane zpackal, ale pokud si zkopírujte kód a spustit lokálně, tak by to mělo vypadat, jak jste to navrhl.

Question 3

Zkuste balení div máte s kontejnerem a zaměřit se pouze na vnitřní div se animace

.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

Můžete oddělit a přesunout text do span a aplikovat animace na span. Viz úryvek níže.

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

Pro některé důvod, proč v kódu editor, layout dostane zpackal, ale pokud si zkopírujte kód a spustit lokálně, tak by to mělo vypadat, jak jste to navrhl.

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

Zkuste balení div máte s kontejnerem a zaměřit se pouze na vnitřní div se animace

.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>

Jak mohu dát animace do mého hraničí prvku html s css, ale NE, že to je hranice animovat stejně?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii