In diesem Artikel werden Sie angezeigt, wie Sie HTML5/CSS3 verwenden, um eine HTML -Seite mit Sticky -Notizen in nur 5 Schritten zu erstellen. Die Renderings sind wie folgt:
(Hinweis: Der Text auf dem Bild ist rein hergestellt und lustig. Wenn es Ähnlichkeit gibt, ist es rein ein Zufall, danke!)
Hinweis: Dieser Effekt ist in Safari, Chrom, Firefox und Oper zu sehen. Da die Unterstützung für HTML5 im IE nicht vollständig ist, kann der Effekt nicht ersichtlich sein.
Schritt 1: Erstellen Sie die grundlegenden HTML und Quadrate
Fügen Sie zunächst die grundlegende HTML -Struktur hinzu und erstellen Sie das Basisquadrat. Der Code lautet wie folgt:
<ul>
<li> <a href = "#">
<h2> DUDU: </H2>
<p> Warum gab es in letzter Zeit keine schönen Beiträge? Ich werde auf jeden Fall eine Überschriftsempfehlung geben, empfehlen! </P>
</a> </li>
<li> <a href = "#">
<h2> Onkel Tom: </h2>
<p> Ein Mitglied des Teams ging nach Microsoft, um SDE3 zu machen, und er musste erneut neues Mitglied einstellen </p>
</a> </li>
<li> <a href = "#">
<h2> Technischer Bruder: </H2>
<p> o2ds ist das gleiche wie das Buch, das ich übersetzt habe. Ich muss es schneller übersetzen als er. Arbeiten Sie nachts Überstunden, schnell! schnell! Schnell! </p>
</a> </li>
<li> <a href = "#">
<h2> artech: </h2>
<p> Es gibt so wenige Beiträge in WCF. Es scheint, dass ich mehr Beiträge für alle veröffentlichen muss, um </p> zu lernen
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> Um das Erlaubnismanagement und das Workflow -Management auf die extreme Fähigkeit zu machen, kann eine Person nur wenige Dinge gut tun </p>
</a> </li>
<li> <a href = "#">
<h2> ein Kampfsportmeister: </h2>
<p> Ich werde nie für weniger als 25.000 Yuan zum Interview gehen, es ist Oma </p>
</a> </li>
</ul>
Jede Note fügt eine HREF -Verbindung hinzu, hauptsächlich zur Unterstützung des Tastaturzugriffs, und der CSS -Code lautet wie folgt:
*{{
Rand: 0;
Polsterung: 0;
}
Körper{
Schriftfamilie: Arial, Sans-Serif;
Schriftgröße: 100%;
Rand: 3em;
Hintergrund:#666;
Farbe: #ffff;
}
H2, p {
Schriftgröße: 100%;
Schriftgewicht: normal;
}
ul, li {
Listenstil: Keine;
}
ul {
Überlauf: versteckt;
Polsterung: 3em;
}
ul li a {
Textdekoration: Keine;
Farbe:#000;
Hintergrund: #ffc;
Anzeige: Block;
Höhe: 10em;
Breite: 10em;
Polsterung: 1em;
}
ul li {
Rand: 1EM;
float: links;
}
Die Effekte sind wie folgt:
Schritt 2: Schatten und handgeschriebene Kursivfiguren
Dieser Schritt besteht darin, den Schatteneffekt von Quadraten zu erkennen und die Schriftart in Sage (nur Englisch) zu ändern. Da Google Unterstützung für eine Schriftart -API bietet, können wir sie direkt verwenden. Fügen Sie zunächst einen Anruf bei Google API hinzu:
<link href = "http://fonts
Setzen Sie dann den Verweis auf diese Schriftart:
Ul Li H2
{
Schriftgröße: 140%;
Schriftgewicht: fett;
Padding-Bottom: 10px;
}
ul li p
{
Schriftfamilie: "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
Schriftgröße: 110%;
}
In Bezug auf Schatten, da jeder Browser sie nicht vollständig unterstützt, müssen er separat verarbeitet werden und der Code ist wie folgt:
ul li a
{
Textdekoration: Keine;
Farbe: #000;
Hintergrund: #ffc;
Anzeige: Block;
Höhe: 10em;
Breite: 10em;
Polsterung: 1em; / * Firefox */
-moz-box-shadow: 5px 5px 7px rgba (33,33,33,1); / * Safari+Chrom *//
-Webkit-Box-Shadow: 5px 5px 7px RGBA (33,33,33, .7); / * Opera */
Box-Shadow: 5px 5px 7px RGBA (33,33,33, .7);
}
Die Effekte sind wie folgt:
Schritt 3: Neigen Sie das Quadrat
Um das Quadrat zu neigen, müssen wir den folgenden Code in li-> a hinzufügen:
ul li a {
-Webkit-transform: rotate (-6deg);
-O-transform: rotieren (-6 Grad);
-moz-transform: drehen (-6deg);
}
Um die Quadratkippen zufällig zu machen, anstatt alle Kippen, müssen wir den neuen CSS3 -Selektor verwenden, damit das Quadrat alle 2, negativ 3 degs und 5 degs alle 6 degs neigt:
Ul li: n-Kind (sogar) a {{
-O-Transformation: Drehen (4DEG);
-Webkit-Transformation: Drehen (4DEG);
-moz-transform: drehen (4DEG);
Position: Relativ;
Top: 5px;
}
Ul li: n-Kind (3n) a {{
-O-transform: rotieren (-3deg);
-Webkit-transform: rotate (-3deg);
-moz-transform: rotieren (-3 Grad);
Position: Relativ;
Top: -5px;
}
Ul li: nth-Kind (5n) a {{
-O-Transformation: Drehen (5 Grad);
-Webkit-Transformation: Drehen (5DEG);
-moz-transform: drehen (5deg);
Position: Relativ;
Top: -10px;
}
Die Effekte sind wie folgt:
Schritt 4: Skalierung des Platzes, wenn sie schweben und sich konzentrieren
Um den Skalierungseffekt bei Schweben und Fokus zu erreichen, müssen wir den folgenden Code hinzufügen:
ul li a: schwebe, ul li a: fokus {
-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-Transformation: Skala (1,25);
-moz-transform: Skala (1,25);
-O-Transformation: Skala (1,25);
Position: Relativ;
Z-Index: 5;
}
Das Einstellen von Z-Index auf 5 bedeutet, dass das Quadrat bei der Vergrößerung andere Quadrate abdecken kann. Gleichzeitig unterstützt der Fokus auch eingestellt, und unterstützt auch den Zugriff auf Registerkartenschlüssel und der Effekt wie folgt:
Schritt 5: Glätterer Übergang und fügen Sie Farben hinzu
Die Spezialeffekte im vierten Schritt sehen etwas steif aus. Wir können einen Übergang hinzufügen, um einen reibungslosen Animationseffekt zu erzielen. Darüber hinaus sind die Farben relativ Single. Wir können verschiedene Farben festlegen. Fügen Sie zunächst den Übergang in ul-> li-> a hinzu:
-moz-transition: -moz-transform .15s linear;
-O-Übergang: -O-Transformation .15s linear;
-Webkit-Übergang: -Webkit-Transformation .15S linear;
Definieren Sie dann verschiedene Farben in gleichmäßiger und 3n:
Ul li: n-Kind (sogar) a {{
-O-Transformation: Drehen (4DEG);
-Webkit-Transformation: Drehen (4DEG);
-moz-transform: drehen (4DEG);
Position: Relativ;
Top: 5px;
Hintergrund: #cfc;
}
Ul li: n-Kind (3n) a {{
-O-transform: rotieren (-3deg);
-Webkit-transform: rotate (-3deg);
-moz-transform: rotieren (-3 Grad);
Position: Relativ;
Top: -5px;
Hintergrund: #ccf;
}
Auf diese Weise wird unser endgültiger Effekt erreicht:
Zusammenfassen
Zu diesem Zeitpunkt haben wir die grundlegenden Merkmale von HTML5 und CSS3 verwendet, um einen ziemlich guten Noten-Post-Effekt zu erzielen. HTML5/CSS3 ist in der Tat sehr mächtig. Wenn Sie einige erweiterte Funktionen hinzufügen, z. B. das Kombinieren mit JavaScript, können Sie einen fantastischeren Effekt erzielen. Es ist aus den Artikeln HTML5 Laboratory Series, die Ihnen von Diante Brick gegeben wurden, aus ersichtlich.
Außerdem: Der Text im Bild ist rein hergestellt. Wenn es Ähnlichkeit gibt, ist es nur ein Zufall. Danke schön!