So erstellen Sie einen Flash-CSS3-Effekt, wenn die Maus über ein Bild im Frontend gleitet

Vor zwei oder drei Jahren hat Bruder Ji die Titelseite dieser Website erstellt, als er noch Student war. Tatsächlich hat diese Website jetzt viele Vorgänger, um allen zu zeigen, wie jung und unwissend war er vorher.
Okay, heute werde ich darüber sprechen, wie man einen reflektierenden Blinkeffekt erzeugt, wenn die Maus über das Bild gleitet. Ich habe diesen Effekt zufällig entdeckt, als ich bei JD eingekauft habe .com. Werfen wir einen Blick auf die fertige Produktdemonstration unten: Ansonsten ist es peinlich, lange zu reden und immer noch nicht zu wissen, welche Wirkung man erzielen soll. Ach ja, wie heißt diese Situation? „Umständlicher Chat“



Wie Sie sehen, geht es im heutigen Artikel darum, wie Sie diesen Effekt erzielen können
- Ps: Leute mit ein wenig HTML-Grundkenntnissen werden es leicht verstehen. Wenn Sie nicht über die Grundlage verfügen, kann es schwierig erscheinen.
Veröffentlichen Sie zuerst den Code:

<div><a><img  alt="So erstellen Sie einen Flash-CSS3-Effekt, wenn die Maus über ein Bild im Frontend gleitet" ></a></div>

Das Obige ist der Code im HTML, es ist nicht viel, es ist relativ einfach, der Fokus liegt auf die Rückseite Der CSS-Code muss sorgfältig gelesen und unter Bezugnahme auf viele CSS3-Wissenspunkte analysiert werden

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码，就不一一解释了

Das Obige ist Der CSS-Stilcode, Bruder Ji hat einfach eine Demo geschrieben, um ihn allen zu zeigen. Tatsächlich wurde der reflektierende Stilcode dahinter auch von Bruder Ji kopiert Ich habe vergessen, es fertigzustellen, also kann ich es nur kopieren. Wenn Sie es nicht verstehen, können Sie es in Baidu verstehen.

Die spezifische Theorie besteht darin, eine transparente Ebene über dem a-Tag hinzuzufügen und diese durch Positionierung auf das a-Tag zu drücken. Natürlich kann es sich auch um jedes andere Tag handeln Ich habe unterschiedliche Gewohnheiten und schiebe die transparente Ebene dann mit der CSS3-Maus nach rechts, um diesen reflektierenden Effekt zu erzielen.

Okay, die spezifische Methode wurde mit Ihnen geteilt. Wenn Sie sie in Ihrem eigenen Projekt verwenden möchten, müssen Sie über einige Grundkenntnisse in HTML + CSS verfügen, sonst wird es schwierig.

Unten habe ich die Demo gepackt, die ich gerade geschrieben habe. Wenn Sie sie nicht gut verstehen, können Sie sie herunterladen und sorgfältig studieren.

Originallink: Wie erstelle ich einen CSS3-Flash-Effekt, wenn die Maus über das Bild im Frontend gleitet?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Flash-CSS3-Effekt, wenn die Maus über ein Bild im Frontend gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!