Heim  >  Artikel  >  Web-Frontend  >  Wie man CSS nach und nach verschwinden lässt

Wie man CSS nach und nach verschwinden lässt

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-15 14:07:396297Durchsuche

So realisieren Sie das allmähliche Verschwinden von CSS: Definieren Sie zunächst die Regel und das Animationsattribut „@keyframes“ und fügen Sie dann den Stil „opacity:1;“ am Anfang der Animation hinzu „opacity:0“ bis zum Ende der Animation ;“-Stil, legt den vollständig transparenten Zustand fest und verbirgt das Element.

Wie man CSS nach und nach verschwinden lässt

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.

.hideSlow{
    background: #a40808;
      color: #fff;
      animation: hidetip 5s 1;
      animation-fill-mode: forwards;
      -webkit-animation: showtip 5s 1;
      -webkit-animation-fill-mode: forwards;
}
@keyframes hidetip {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    @-webkit-keyframes hidetip {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie man CSS nach und nach verschwinden lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn