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:

Code kopieren

Der Code lautet wie folgt:

Dudu :




Warum haben in letzter Zeit keine schönen Frauen gepostet? Ich werde eine Überschrift auf jeden Fall weiterempfehlen!

;h2>Onkel Tom:


Ein Mitglied des Teams ging zu Microsoft, um an SDE3 zu arbeiten, und musste ein neues Mitglied einstellen

; li>

• Technischer Bruder: Ich muss schnell Überstunden machen!
a href=" #">
• 🎜>

  Machen Sie das Berechtigungsmanagement und das Workflow-Management bis zum Äußersten. Eine Person kann nur so wenige Dinge tun ;
  

  Ein bestimmter Kampfkunstmeister:

  Ich werde nie wieder für weniger als 25.000 Yuan zu einem Vorstellungsgespräch gehen, es ist Oma
  
  

Fügen Sie eine href-Verbindung zu jeder Notiz hinzu, hauptsächlich um den Tastaturzugriff zu unterstützen , der CSS-Code lautet wie folgt:





Code kopieren


Der Code lautet wie folgt:


*{
margin:0;
padding:0;
}
font-family:arial,sans-serif;
margin:3em ;

color:#fff;
h2,p{
font-weight :normal;
}

ul,li{

list-style:none;} ul{ padding:3em; ul li a { text-decoration:none

background:#ffc;

height:10em; :10em;

padding:1em;
ul li{
float:left


Der Effekt ist wie folgt:


Schritt 2: Schatten und handgeschriebene Kursivschrift
In diesem Schritt möchten wir den Schatteneffekt des Quadrats erzielen und die Schriftart in Kursivschrift ändern (nur Englisch). Schriftart-API-Unterstützung, wir können es direkt verwenden. Fügen Sie zunächst einen Aufruf zur Google-API hinzu:





Kopieren Sie den Code


Der Code lautet wie folgt:





Dann auf diese Schriftart verweisen:





Kopieren Sie den Code


Der Code lautet wie folgt:


ul li h2

{
Schriftgröße: 140 %;
Schriftstärke: fett; padding-bottom: 10px;
}
ul li p
{
Schriftfamilie: „Reenie Beanie“, Arial, Sans-Serif, Microsoft Yahei;

}

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.