Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um den großen Animationseffekt rechts einzublenden

Verwenden Sie CSS, um den großen Animationseffekt rechts einzublenden

王林nach vorne: 2023-08-31 12:33:03693Durchsuche

使用 CSS 淡入右侧大动画效果

Um mithilfe von CSS einen Animationseffekt zu erzielen, der nach rechts verblasst, können Sie versuchen, den folgenden Code auszuführen: -

Beispiel

Live-Demo

<html>
   <head>
      <style>

         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes fadeInRightBig {
            0% {
               opacity: 0;
               -webkit-transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }

         @keyframes fadeInRightBig {
            0% {
               opacity: 0;
               transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

         .fadeInRightBig {
            -webkit-animation-name: fadeInRightBig;
            animation-name: fadeInRightBig;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeInRightBig"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</head>

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den großen Animationseffekt rechts einzublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So legen Sie Medienabhängigkeiten für CSS-Stylesheets festNächster Artikel：So legen Sie Medienabhängigkeiten für CSS-Stylesheets fest

In Verbindung stehende Artikel

Mehr sehen