CSS-Animation von Transparenzänderungen (Ein- und Ausblendeffekt)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-11-09 14:28:30

Original

32300 Leute haben es durchsucht

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 [变化时间];

Nach dem Login kopieren

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

Beispiel:

Das folgende Beispiel wird innerhalb von 3 Sekunden animiert.

transition: all 3s;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!