Schauen Sie sich an, wie Sie mit CSS den dynamischen Effekt der Drehtür von Bildern erzielen können.

Wie kann man mit CSS den dynamischen Effekt einer Bilddrehlaterne realisieren? Im folgenden Artikel erfahren Sie, wie Sie mithilfe der CSS3-Animationstransformation den Effekt eines rotierenden Bildes erzielen.

Weil das Projekt einen Drehtüreffekt eines Bildes erzielen muss. Nachdem ich die meisten gängigen Vue-Komponentenbibliotheken überprüft hatte, sah ich solche Komponenten selten, daher habe ich den Drehtüreffekt manuell basierend auf CSS3-Animationen implementiert. Mir fallen sofort zwei Lösungen ein: Eine besteht darin, einen Timer zu verwenden, scrollLeft oder den linken Attributwert an der Position zu ändern, und die andere besteht darin, die Transformation und Animation von CSS3 zu verwenden.

Wählen Sie die Verwendung von Animationen zur Implementierung, da die von js implementierten Animationen auf der CPU und die Animationen von CSS3 auf der GPU ausgeführt werden. Daher haben wir uns schließlich für die Verwendung von CSS3 zur Implementierung entschieden Art der Operation.

Verwenden Sie scrollLeft

Zunächst wird scrollLeft + Overflow verwendet, um den Effekt zu erzielen, und ein Timer wird verwendet, um ihn auszulösen, was jedes Mal ein Neuzeichnen und einen Reflow bewirkt. (PS: Wenn Sie die Leistung verbessern müssen, können Sie requestAnimationFrame anstelle der Timer-Auslösung verwenden. Der Hauptvorteil besteht darin, dass requestAnimationFrame alle DOM-Vorgänge in jedem Frame konzentriert und ihn in einem Neuzeichnen oder Reflow sowie einem Neuzeichnen oder Reflow abschließt. Der Reflow Das Zeitintervall folgt eng der Aktualisierungsfrequenz des Browsers. Im Allgemeinen beträgt diese Frequenz 60 Bilder pro Sekunde CSS3-Animation zum Realisieren der rotierenden Laterne, Verwendung von CSS-Variablen zum dynamischen Festlegen des TranslateX-Offsets jeder Zustandstransformation und der kritischsten Animation, um einige der Effekte des erzeugten GIF wie folgt zu erzielen.

---

1. Legen Sie vorab das HTML-Layout fest und richten Sie einen Div-Container ein Das .box-Element Die Hauptmethode besteht darin, CSS-Variablen zu verwenden und dann den Effekt jedes Status der Animation durch bestimmte Werte dynamisch festzulegen. Der Schlüsselcode verwendet die Animation: cap.length*8+ 's move unendlich linear; was den Effekt einer unendlichen wiederholten Bewegung erzeugt.

ps: Die allgemeinen Hauptbetriebspunkte sind wie folgt, andere Details werden weggelassen

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离，则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束，从新开始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"     style="max-width:90%" height="90px" : / alt="Schauen Sie sich an, wie Sie mit CSS den dynamischen Effekt der Drehtür von Bildern erzielen können." >
        </li>
    </ul>
</div>

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

(Lernvideo-Sharing: css-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSchauen Sie sich an, wie Sie mit CSS den dynamischen Effekt der Drehtür von Bildern erzielen können.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!