Heim  >  Artikel  >  Web-Frontend  >  CSS-Animation von Transparenzänderungen (Ein- und Ausblendeffekt)

CSS-Animation von Transparenzänderungen (Ein- und Ausblendeffekt)

不言
不言Original
2018-11-09 14:27:4432249Durchsuche

In diesem Artikel verwenden wir CSS, um Transparenzänderungen zu animieren und Ein- und Ausblendeffekte zu erzielen.

Um Transparenzänderungen in CSS zu animieren, müssen Sie das Übergangsattribut verwenden. Da es sich bei dem Übergangsattribut um ein neues Attribut in CSS3 handelt, muss bei der Ausführung in einigen unterstützten Browsern ein Präfix hinzugefügt werden.

Safari wird wie Chrom als „-webkit-transition“ geschrieben, FireFox als „-moz-transition“, Internet Explorer als „-ms-transition“ und Opera als „- o-transition“ ; Wenn es sich um einen aktuellen Webbrowser handelt (Internet Explorer 11, Microsoft Edge), verwenden Sie das „transition“-Attribut direkt ohne Präfix. (Verwandte Empfehlungen: CSS3 Online-Handbuch)

Syntax:

transition: all [变化时间];

Geben Sie für [Änderungszeit] den Zeitpunkt der Animationsänderung an

Beispiel:

Das folgende Beispiel wird innerhalb von 3 Sekunden animiert.

transition: all 3s;

Das Codebeispiel lautet wie folgt:

Erstellen Sie die folgende HTML-Datei.

fade.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="fade.css" />
<meta charset="utf-8" />
    <script type="text/javascript">
        function FadeOutLinkClick() {
                    var frame = document.getElementById("FadeOutDivFrame");
            frame.className = "FadeOutFrame fadeout";
        }        
        function FadeInLinkClick() {          
        var frame = document.getElementById("FadeInDivFrame");
          frame.className = "FadeInFrame fadein";
        }    
        </script>
        </head>
        <body>
  <div id="FadeOutDivFrame" class="FadeOutFrame">按钮。</div>
  <a id="fadeout" href="javascript:void(0);" onclick="FadeOutLinkClick();">淡出</a>
  <hr/>
  <div id="FadeInDivFrame" class="FadeInFrame">框架。</div>
  <a id="fadeout" href="javascript:void(0);" onclick="FadeInLinkClick();">淡入</a>
  </body>
  </html>

fade.css

.FadeOutFrame {
    width: 320px;    
    height: 180px;    
    background-color: #abffe8;    
    border: 1px solid #0067aa;    
    opacity: 1;
}
.FadeOutFrame.fadeout{
  -webkit-transition: all 1.5s;  
  -moz-transition: all 1.5s;  
  -ms-transition: all 1.5s;  
  -o-transition: all 1.5s;  
  transition: all 1.5s;  
  opacity: 0;
}
.FadeInFrame {
    width: 320px;    
    height: 180px;    
    background-color: #ffd3d3;    
    border: 1px solid #b50042;    
    opacity: 0;
}
.FadeInFrame.fadein{
  -webkit-transition: all 1.5s;  
  -moz-transition: all 1.5s;  
  -ms-transition: all 1.5s;  
  -o-transition: all 1.5s;  
  transition: all 1.5s;  
  opacity: 1;
}

Beschreibung: Ändern Sie die Kategorie des Felds „FadeOutDivFrame“ von „FadeOutFrame“, wenn der Link „FadeOut“ angezeigt wird wird angeklickt. Das Übergangsattribut und die Deckkraft: 0; sind für „FadeOutFrame fadeout“ und „FadeOutFrame fadeout“ festgelegt. Da das Übergangsattribut und die Deckkraft: 0;

Der Effekt ist wie folgt:

CSS-Animation von Transparenzänderungen (Ein- und Ausblendeffekt)

Dieser Artikel endet hier. Weitere verwandte Inhalte finden Sie im CSS3-Video auf PHP Chinesische Website-Tutorial-Kolumne ! ! !

Das obige ist der detaillierte Inhalt vonCSS-Animation von Transparenzänderungen (Ein- und Ausblendeffekt). 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