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

Wie man CSS nach und nach verschwinden lässt

醉折花枝作酒筹
Freigeben: 2023-01-05 16:08:43
Original
6373 Leute haben es durchsucht

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;
      }
    }
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage