En seulement cinq étapes, vous pouvez utiliser HTML5/CSS3 pour créer rapidement des effets de pense-bête (images)_html5 conseils du didacticiel

Ce que cet article va vous montrer, c'est comment utiliser HTML5/CSS3 pour créer une page HTML avec un effet pense-bête en seulement 5 étapes. Le rendu est le suivant :
(Remarque : le texte dans l'image est purement fabriqué et est. à des fins amusantes. , toute similitude est purement fortuite, merci ! )

Remarque : cet effet peut être vu dans Safari, Chrome, Firefox et Opera. En raison d'une prise en charge incomplète de HTML5, IE Non visible. effet.
Étape 1 : Créer du HTML et des carrés de base
Ajoutez d'abord la structure HTML de base et construisez le carré de base, le code est le suivant :

Copier le code

Le code est le suivant :

• Dudu :

  
  

  Pourquoi n’y a-t-il pas eu de belles femmes qui ont posté récemment ? Je recommanderai certainement un titre, je recommande !recommande !

  
  
;h2>Oncle Tom :


Un membre de l'équipe est allé chez Microsoft pour travailler sur SDE3, et il a dû embaucher un nouveau membre

;

• 
  

  Frère technique :

  
  

  J'ai traduit, je dois être plus rapide que lui. Je ferai des heures supplémentaires la nuit, vite !

  a href=" #">


• 
  

  Gala Jiri :

  🎜>

  Faire en sorte que la gestion des autorisations et des flux de travail soit à l'extrême de mes capacités. Une seule personne ne peut faire que peu de choses
  

;


Un certain maître d'arts martiaux :




Je n'irai plus jamais à un entretien pour moins de 25 000 yuans, c'est grand-mère

Ajouter une connexion href à chaque note, principalement pour prendre en charge l'accès au clavier , le code CSS est le suivant :





Copier le code


Le code est le suivant :

*{
margin:0;

padding:0;

} body{ font-family:arial,sans-serif font-size:100%; marge : 3em ;

arrière-plan :#666 ;

couleur :#fff ;

h2,p{
font-size : 100 % ;
font-weight; :normal;
}
ul,li{
list-style:aucun;
ul{
overflow:hidden;
ul li a {
text-decoration:none;
color:#000;
background:#ffc;
hauteur:10em; :10em;
padding:1em;
}
ul li{
margin:1em;
float:left
}


L'effet est comme suit :


Étape 2 : Ombre et cursive manuscrite
Dans cette étape, nous souhaitons obtenir l'effet d'ombre du carré et changer la police en cursive (en anglais uniquement depuis que Google le propose). Prise en charge de l'API de police, nous pouvons l'utiliser directement. Ajoutez d'abord un appel à l'API Google :





Copiez le code


Le code est le suivant :

Puis définissez pour référencer cette police :

Copiez le code Le code est le suivant :

ul li h2

{
font-size : 140%
font-weight : bold

padding-bottom : 10px ;
}
ul li p
{

famille de police : "Reenie Beanie",arial,sans-serif,Microsoft Yahei

taille de police : 110 % }
Concernant les shadows, comme chaque navigateur ne le prend pas entièrement en charge, il doit être géré séparément. Le code est le suivant :

Copier le code Le code est le suivant :

ul li a
{
texte-décoration : aucun
couleur : #000
fond; : #ffc;
display: block;
hauteur: 10em;
largeur: 10em;
remplissage: 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); box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}


L'effet est le suivant :

Étape 3 : Inclinez le carréPour incliner le carré, nous devons ajouter le code suivant dans li->a :

Copiez le code Le code est le suivant :

ul li a{

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


Mais pour que les carrés s'inclinent de manière aléatoire au lieu de tous s'incliner, nous devons utiliser le nouveau sélecteur CSS3 pour incliner les carrés de 4 degrés tous les 2 et tous les 3. Chaque inclinaison a moins 3 degrés, et toutes les 6 inclinaisons ont 5 degrés :

Copiez le code

Le code est le suivant :

ul li:nth-child(even) a{

-o-transform:rotate(4deg); 🎜>-webkit-transform:rotate(4deg);

-moz-transform :rotate(4deg);
position:relative;
top:5px
}
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);
-moz-transform:rotate(5deg );
position:relative
top:-10px;


Le L'effet est le suivant :


Étape 4 : Survol et mise au point du carré de zoom
Pour obtenir l'effet de zoom pendant le survol et la mise au point, nous devons ajouter le code suivant :

Copier le code


Le code est le 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: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25);

position:relative;

z- index:5;

}

Définir z-index sur 5 permet au carré de couvrir d'autres carrés lors d'un zoom avant. En même temps, comme le focus est également défini, il prend également en charge l'accès à la commutation par touche de tabulation. L'effet est le suivant :


Étape 5 : Transition douce et ajout de couleur
Le Les effets spéciaux de l'étape 4 semblent un peu rigides. Nous pouvons ajouter une transition pour obtenir l'effet d'une animation fluide. De plus, la couleur est relativement unique. Nous pouvons d'abord ajouter une transition dans ul->li->a. :

Copier le code

Le code est le suivant :


-moz-transition : -moz-transform .15s linéaire

-o-transition:-o-transform .15s linéaire

-webkit-transition :-webkit-transform .15s Puis définir différentes couleurs en pair et 3n :

Copier le code

Le code est le suivant :


ul li:nth-child(even) a{

-o-transform:rotate(4deg);

-webkit- transform:rotate(4deg); ); position:relative; top:5px; background:#cfc ul li:nth-child(3n) a{

-o-transform : rotation(-3deg);

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

-moz-transform:rotate(-3deg ); 🎜>fond :#ccf
}

De cette façon, nous avons terminé notre effet final :

Résumé
À ce stade, nous avons utilisé les fonctionnalités de base de HTML5 et CSS3 pour créer un très bon effet de pense-bête HTML5/CSS3. est en effet très puissant. Si vous ajoutez des fonctionnalités avancées, telles que la combinaison avec JavaScript, vous pouvez obtenir des effets encore plus impressionnants. Vous pouvez le voir dans la série d'articles HTML5 Lab que Dang Knight Brick vous a fournie.
Aussi : le texte sur l'image est purement fabriqué. Toute similitude est purement fortuite. Merci !