Lo que este artículo le mostrará es cómo usar HTML5/CSS3 para crear una página HTML con notas adhesivas en solo 5 pasos. Las representaciones son las siguientes:
(Nota: El texto en la imagen está puramente fabricado y divertido. Si hay alguna similitud, es puramente una coincidencia, ¡gracias!)
Nota: Este efecto se puede ver en Safari, Chrome, Firefox y Opera. Dado que el soporte para HTML5 no está completo en IE, el efecto no se puede ver.
Paso 1: crea el HTML y los cuadrados básicos
Primero agregue la estructura HTML básica y cree el cuadrado básico, el código es el siguiente:
<ul>
<li> <a href = "#">
<h2> dudu: </h2>
<p> ¿Por qué no ha habido publicaciones hermosas recientemente? Definitivamente daré una recomendación principal, ¡recomendaré! Recomendar! </p>
</a> </li>
<li> <a href = "#">
<H2> Tío Tom: </h2>
<p> Un miembro del equipo fue a Microsoft para hacer SDE3, y tuvo que contratar a un nuevo miembro nuevamente </p>
</a> </li>
<li> <a href = "#">
<h2> hermano técnico: </h2>
<p> O2DS es el mismo que el libro que traducí. Debo traducirlo más rápido que él. ¡Trabaja horas extras por la noche, rápido! ¡rápido! Fast! </p>
</a> </li>
<li> <a href = "#">
<h2> Artech: </h2>
<p> Hay tan pocas publicaciones en WCF. Parece que tengo que publicar más publicaciones para que todos aprendan </p>
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> Para obtener la gestión de permisos y la gestión del flujo de trabajo hasta el extremo de mi capacidad, una persona solo puede hacer tan pocas cosas </p> </p>
</a> </li>
<li> <a href = "#">
<h2> Un maestro de artes marciales: </h2>
<p> Nunca iré a la entrevista por menos de 25,000 yuanes, es la abuela </p>
</a> </li>
</ul>
Cada nota agrega una conexión HREF, principalmente para admitir el acceso al teclado, y el código CSS es el siguiente:
*{
margen: 0;
relleno: 0;
}
cuerpo{
Font-Family: Arial, Sans-Serif;
tamaño de fuente: 100%;
margen: 3em;
Antecedentes:#666;
Color: #ffff;
}
H2, P {
tamaño de fuente: 100%;
Font-peso: Normal;
}
Ul, Li {
Estilo de lista: Ninguno;
}
ul {
desbordamiento: oculto;
relleno: 3em;
}
ul li a {
Decoración de texto: ninguna;
Color:#000;
Antecedentes: #ffc;
Pantalla: bloque;
Altura: 10em;
Ancho: 10em;
relleno: 1em;
}
ul li {
margen: 1em;
flotante: izquierda;
}
Los efectos son los siguientes:
Paso 2: sombras y personajes cursivos escritos a mano
Este paso es realizar el efecto de la sombra de los cuadrados y cambiar la fuente a Sage (solo inglés). Dado que Google proporciona soporte para la API de fuentes, podemos usarlo directamente. Primero, agregue una llamada a la API de Google:
<link href = "http://fonts.googleapis.com/css?family=reenie+Beanie:regular" rel = "stylesheet" type = "text/css">
Luego establezca la referencia a esta fuente:
UL Li H2
{
tamaño de fuente: 140%;
Font-Weight: Bold;
Botón de relleno: 10px;
}
ul li p
{
Font-Family: "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
tamaño de fuente: 110%;
}
Con respecto a las sombras, dado que cada navegador no los admite completamente, deben procesarse por separado, y el código es el siguiente:
ul li a
{
Decoración de texto: ninguna;
Color: #000;
Antecedentes: #ffc;
Pantalla: bloque;
Altura: 10em;
Ancho: 10em;
relleno: 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); / * Ópera */
Shadow de caja: 5px 5px 7px RGBA (33,33,33, .7);
}
Los efectos son los siguientes:
Paso 3: inclinar el cuadrado
Para inclinar el cuadrado, necesitamos agregar el siguiente código en Li-> A:
ul li a {
-webkit-transform: rotar (-6deg);
-o-transform: rotar (-6deg);
-Moz-Transform: rotar (-6deg);
}
Pero para hacer que la inclinación cuadrada se incline al azar, en lugar de todas las inclinaciones, necesitamos usar el nuevo selector CSS3, de modo que el cuadrado inclina 4 grados cada 2, negativos 3 grados cada 3 y 5 degs cada 6:
ul li: nth-child (incluso) a {
-O-transform: girar (4deg);
-webkit-transform: rotar (4deg);
-Moz-Transform: Rotate (4deg);
Posición: relativo;
Arriba: 5px;
}
ul li: nth-child (3n) a {
-o-transform: rotar (-3deg);
-webkit-transform: rotar (-3deg);
-Moz-Transform: rotar (-3deg);
Posición: relativo;
arriba: -5px;
}
ul li: nth-child (5n) a {
-o-transform: rotar (5deg);
-Webkit-transform: rotar (5deg);
-Moz-Transform: Rotate (5deg);
Posición: relativo;
arriba: -10px;
}
Los efectos son los siguientes:
Paso 4: Escalar el cuadrado cuando se desplaza y enfoque
Para lograr el efecto de escala cuando se desplaza y enfoque, necesitamos agregar el siguiente código:
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);
Shadow de caja: 10px 10px 7px RGBA (0,0,0, .7);
-Webkit-transform: escala (1.25);
-Moz-Transform: escala (1.25);
-O-transform: escala (1.25);
Posición: relativo;
índice z: 5;
}
Establecer el índice Z en 5 es permitir que el cuadrado cubra otros cuadrados al agrandar. Al mismo tiempo, debido a que el enfoque también se establece, también admite el acceso de conmutación de la tecla TAB, y el efecto es el siguiente:
Paso 5: Transición suave y agregar colores
Los efectos especiales en el cuarto paso se ven un poco rígidos. Podemos agregar transición para lograr un efecto de animación suave. Además, los colores son relativamente solteros. Podemos establecer diferentes colores. Primero, agregue la transición en ul-> li-> a:
-Moz-Transition: -Moz-Transform .15s Lineal;
-O-transición: -o-transform .15s lineal;
-WebKit-Transition: -webkit-transform .15s lineal;
Luego defina diferentes colores en un par y 3n:
ul li: nth-child (incluso) a {
-O-transform: girar (4deg);
-webkit-transform: rotar (4deg);
-Moz-Transform: Rotate (4deg);
Posición: relativo;
Arriba: 5px;
Antecedentes: #CFC;
}
ul li: nth-child (3n) a {
-o-transform: rotar (-3deg);
-webkit-transform: rotar (-3deg);
-Moz-Transform: rotar (-3deg);
Posición: relativo;
arriba: -5px;
Antecedentes: #ccf;
}
De esta manera, nuestro efecto final se logra:
Resumir
En este punto, utilizamos las características básicas de HTML5 y CSS3 para crear un efecto de publicación de notas bastante bueno. HTML5/CSS3 es realmente muy poderoso. Si agrega algunas características avanzadas, como combinarlas con JavaScript, puede lograr un efecto más impresionante. Se puede ver en los artículos de la Serie de Laboratorio HTML5 que le dio Diante Brick.
También: el texto en la imagen se fabrica puramente. Si hay alguna similitud, es puramente una coincidencia. ¡Gracias!