Ako môžem dať animácie na môj ohraničený html element s css, ale NIE je to hraníc animovať rovnako?

Question 1

Ako môžem dať animácie na môj ohraničený html element s css, ale NIE je to hraníc animovať rovnako? To, čo sa deje teraz je celá vec oživuje. Tu 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>

Ďakujeme!

Question 2

Stačí samostatné a presunúť text do span a uplatňovať animácie na span. Pozrite si úryvok nižšie.

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

Z nejakého dôvodu v útržok kódu, editor, rozloženie dostane chaos, ale ak budete kopírovať markup a spustiť lokálne by to malo vyzerať tak, ako ste ho navrhol.

Question 3

Skúste balenie div máte s kontajnerom a zacieliť len na interné div s animácie

.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

Stačí samostatné a presunúť text do span a uplatňovať animácie na span. Pozrite si úryvok nižšie.

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

Z nejakého dôvodu v útržok kódu, editor, rozloženie dostane chaos, ale ak budete kopírovať markup a spustiť lokálne by to malo vyzerať tak, ako ste ho navrhol.

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

Skúste balenie div máte s kontajnerom a zacieliť len na interné div s animácie

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

Ako môžem dať animácie na môj ohraničený html element s css, ale NIE je to hraníc animovať rovnako?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii