Ce que cet article vous montrera, c'est comment utiliser HTML5 / CSS3 pour créer une page HTML avec des notes collantes en seulement 5 étapes. Les rendus sont les suivants:
(Remarque: le texte de l'image est purement fabriqué et drôle. S'il y a une similitude, c'est purement une coïncidence, merci!)
Remarque: Cet effet peut être vu dans Safari, Chrome, Firefox et Opera. Étant donné que la prise en charge de HTML5 n'est pas complète dans IE, l'effet ne peut pas être vu.
Étape 1: Créez le HTML et les carrés de base
Ajoutez d'abord la structure HTML de base et créez le carré de base, le code est le suivant:
<ul>
<li> <a href = "#">
<h2> dudu: </h2>
<p> Pourquoi n'y a-t-il pas eu de beaux messages récemment? Je vais certainement donner une recommandation de titre, recommander! Recommander! </p>
</a> </li>
<li> <a href = "#">
<h2> Oncle Tom: </h2>
<p> Un membre de l'équipe est allé à Microsoft pour faire SDE3, et il a dû embaucher un nouveau membre </p>
</a> </li>
<li> <a href = "#">
<h2> frère technique: </h2>
<p> O2DS est le même que le livre que j'ai traduit. Je dois le traduire plus vite que lui. Travaillez les heures supplémentaires la nuit, vite! rapide! rapide! </p>
</a> </li>
<li> <a href = "#">
<h2> artech: </h2>
<p> Il y a si peu de messages dans WCF. Il semble que je dois publier plus de messages pour que tout le monde puisse apprendre </p>
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> Pour faire la gestion de la permission et la gestion du flux de travail à l'extrême de mes capacités, une personne ne peut faire que peu de choses </p>
</a> </li>
<li> <a href = "#">
<h2> un maître des arts martiaux: </h2>
<p> Je n'irai jamais à l'interview pour moins de 25 000 yuans, c'est grand-mère </p>
</a> </li>
</ul>
Chaque note ajoute une connexion HREF, principalement pour prendre en charge l'accès au clavier, et le code CSS est le suivant:
* {
marge: 0;
rembourrage: 0;
}
corps{
Font-Family: Arial, Sans-Serif;
taille de police: 100%;
marge: 3em;
Contexte: # 666;
Couleur: #ffff;
}
H2, P {
taille de police: 100%;
Police-poids: normal;
}
ul, li {
Style de liste: aucun;
}
ul {
débordement: caché;
rembourrage: 3em;
}
ul li a {
Décoration du texte: aucune;
Couleur: # 000;
Contexte: #FFC;
Affichage: bloc;
hauteur: 10em;
Largeur: 10EM;
rembourrage: 1em;
}
ul li {
marge: 1em;
flottant: à gauche;
}
Les effets sont les suivants:
Étape 2: ombres et personnages cursifs manuscrits
Cette étape consiste à réaliser l'effet ombre des carrés et à changer la police en sage (l'anglais uniquement). Étant donné que Google prend en charge l'API FONT, nous pouvons l'utiliser directement. Tout d'abord, ajoutez un appel à l'API Google:
<link href = "http://fonts.googleapis.com/css?family=reenie+Beanie:Regular" rel = "stylesheet" type = "text / css">
Puis définissez la référence sur cette police:
ul li h2
{
taille de police: 140%;
Police-poids: Bold;
Padding-Bottom: 10px;
}
ul li p
{
Font-Family: "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
taille de police: 110%;
}
En ce qui concerne les ombres, comme chaque navigateur ne les prend pas entièrement en charge, ils doivent être traités séparément et que le code est le suivant:
ul li a
{
Décoration du texte: aucune;
Couleur: # 000;
Contexte: #FFC;
Affichage: bloc;
hauteur: 10em;
Largeur: 10EM;
rembourrage: 1em; / * 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); / * Opéra * /
Box-Shadow: 5px 5px 7px RGBA (33,33,33, .7);
}
Les effets sont les suivants:
Étape 3: inclinez le carré
Pour incliner le carré, nous devons ajouter le code suivant dans li-> a:
ul li a {
-Webkit-Transform: Rotate (-6deg);
-o-transform: rotation (-6deg);
-moz-transform: Rotation (-6deg);
}
Mais pour faire l'inclinaison carrée au hasard, au lieu de tous les inclinaison, nous devons utiliser le nouveau sélecteur CSS3, de sorte que le carré inclinait 4 degrés tous les 2, 3 degs négatifs tous les 3 et 5 degrés tous les 6:
ul li: nth-child (même) a {
-o-transform: rotation (4DEG);
-Webkit-Transform: Rotate (4Deg);
-Moz-transform: Rotation (4deg);
Position: relative;
En haut: 5px;
}
ul li: nth-child (3n) a {
-o-transform: rotation (-3deg);
-Webkit-transform: Rotate (-3deg);
-moz-transform: Rotate (-3deg);
Position: relative;
en haut: -5px;
}
ul li: nth-child (5n) a {
-o-transform: rotation (5deg);
-Webkit-Transform: Rotate (5Deg);
-Moz-transform: Rotation (5deg);
Position: relative;
en haut: -10px;
}
Les effets sont les suivants:
Étape 4: Mise à l'échelle du carré lorsqu'il oscille et se concentre
Pour réaliser l'effet de mise à l'échelle lorsqu'il s'agit de plané et de concentration, nous devons ajouter le code suivant:
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: échelle (1,25);
-Moz-transform: échelle (1,25);
-o-transform: échelle (1,25);
Position: relative;
Z-Index: 5;
}
La définition de l'indice Z sur 5 est de permettre au carré de couvrir d'autres carrés lors de l'élargissement. Dans le même temps, car la mise au point est également définie, elle prend également en charge l'accès à la commutation des clés de l'onglet, et l'effet est le suivant:
Étape 5: transition lisse et ajouter des couleurs
Les effets spéciaux de la quatrième étape semblent un peu raides. Nous pouvons ajouter une transition pour obtenir un effet d'animation en douceur. De plus, les couleurs sont relativement simples. Nous pouvons définir différentes couleurs. Tout d'abord, ajoutez la transition dans ul-> li-> a:
-moz-transition: -moz-transform .15S linéaire;
-o-transition: -o-transform .15s linéaire;
-Webkit-transition: -webkit-transform .15s linéaire;
Définissez ensuite différentes couleurs en 3N:
ul li: nth-child (même) a {
-o-transform: rotation (4DEG);
-Webkit-Transform: Rotate (4Deg);
-Moz-transform: Rotation (4deg);
Position: relative;
En haut: 5px;
Contexte: #cfc;
}
ul li: nth-child (3n) a {
-o-transform: rotation (-3deg);
-Webkit-transform: Rotate (-3deg);
-moz-transform: Rotate (-3deg);
Position: relative;
en haut: -5px;
Contexte: #ccf;
}
De cette façon, notre effet final est accompli:
Résumer
À ce stade, nous avons utilisé les fonctionnalités de base de HTML5 et CSS3 pour créer un assez bon effet de note de note. HTML5 / CSS3 est en effet très puissant. Si vous ajoutez des fonctionnalités avancées, comme les combiner avec JavaScript, vous pouvez obtenir un effet plus impressionnant. Il peut être vu à partir des articles HTML5 Laboratory Series que vous avez donnés par Diante Brick.
Aussi: Le texte de l'image est purement fabriqué. S'il y a une similitude, c'est purement une coïncidence. Merci!