In nur fünf Schritten können Sie mit HTML5/CSS3 schnell Haftnotizeffekte (Bilder) erstellen_HTML5-Tutorial-Tipps

In diesem Artikel erfahren Sie, wie Sie mit HTML5/CSS3 in nur 5 Schritten eine HTML-Seite mit einem Haftnotizeffekt erstellen. Die Darstellung ist wie folgt:
(Hinweis: Der Text im Bild ist rein erfunden und ist Aus Spaßgründen. , jede Ähnlichkeit ist rein zufällig, danke )

Hinweis: Dieser Effekt ist aufgrund unvollständiger Unterstützung für HTML5, IE nicht sichtbar Wirkung.
Schritt 1: Erstellen Sie grundlegendes HTML und Quadrate
Fügen Sie zunächst die grundlegende HTML-Struktur hinzu und erstellen Sie das grundlegende Quadrat. Der Code lautet wie folgt:

}

Da Schatten nicht von jedem Browser vollständig unterstützt werden, muss der Code wie folgt behandelt werden:

Code kopieren

Der Code lautet wie folgt:

ul li a
{
text-decoration: none;
background : #ffc;
display: block;
width: 10em; /* Firefox */
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}


Der Effekt ist wie folgt:

Schritt 3: Kippen Sie das Quadrat
Um das Quadrat zu kippen, müssen wir den folgenden Code in li->a hinzufügen:

Kopieren Sie den Code

Der Code lautet wie folgt:

ul li a{

-webkit-transform:rotate(-6deg); -6deg);

-moz-transform:rotate(-6deg) ;


Um die Quadrate jedoch zufällig zu neigen, müssen wir das verwenden neuer CSS3-Selektor zum Neigen der Quadrate um 4 Grad alle 2 und alle 3. Jede Neigung hat negative 3 Grad und alle 6 Neigungen haben 5 Grad:

Kopieren Sie die Code

Der Code lautet wie folgt: ul li:nth-child(even) a{ -o-transform:rotate(4deg); 🎜>-webkit-transform:rotate(4deg);

position:relative;

ul li:nth -child(3n) a{

-o-transform:rotate(-3deg );
-webkit-transform:rotate(-3deg); 🎜>position:relative;
top:-5px
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg); -transform:rotate(5deg);
position:relative;
top:-10px; Der Effekt ist wie folgt:


Schritt 4: Hover- und Fokus-Zoom-Quadrat
Um den Zoomeffekt während des Hover- und Fokus-Zooms zu erzielen, müssen wir den folgenden Code hinzufügen:





Code kopieren


Der Code lautet wie folgt:

ul li a:hover,ul li a:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7 );
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); 🎜>box-shadow:10px 10px 7px rgba(0,0,0,.7); -webkit-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}

Das Setzen des Z-Index auf 5 ermöglicht es dem Quadrat, andere abzudecken Quadrate beim Vergrößern. Da der Fokus ebenfalls festgelegt ist, wird gleichzeitig auch der Zugriff mit der Tabulatortaste unterstützt. Der Effekt ist wie folgt: Schritt 5: Glatter Übergang und Farbe hinzufügenDer Spezialeffekte in Schritt 4 sehen etwas steif aus, um den Effekt einer sanften Animation zu erzielen. Außerdem können wir in ul->li->a verschiedene Farben hinzufügen :

Code kopieren


Der Code lautet wie folgt:


-moz-transition: -moz-transform .15s linear; -o-transformation:-o-transform .15s linear; Definieren Sie verschiedene Farben in geraden und 3n:

Code kopieren


Der Code lautet wie folgt:

ul li:nth-child(even) a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); );

position:relative;

background:#cfc;}

ul li:nth-child(3n) rotieren(-3deg);
-webkit-transform:rotate(-3deg);
position:relative;
top:-5px; 🎜>Hintergrund:#ccf;
}

Auf diese Weise haben wir unseren endgültigen Effekt fertiggestellt:

Zusammenfassung
Zu diesem Zeitpunkt haben wir die Grundfunktionen von HTML5 und CSS3 verwendet, um einen ziemlich guten Haftnotizeffekt zu erstellen ist in der Tat sehr leistungsstark. Wenn Sie einige erweiterte Funktionen hinzufügen, z. B. die Kombination mit JavaScript, können Sie dies in der HTML5 Lab-Artikelreihe sehen, die Ihnen Dang Knight Brick gegeben hat.
Außerdem: Der Text auf dem Bild ist rein zufällig.