Comentario: Sticky Notes, creo que todos están familiarizados con esta palabra. Hay un buen ejemplo a continuación que puede lograr los efectos especiales de las notas adhesivas a través de HTML5. Amigos a los que les gusta pueden aprender sobre eso.
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Post Note </title>
<style type = "text/css">
*{
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;
}
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%;
}
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);
}
ul li a {
-webkit-transform: rotar (-6deg);
-o-transform: rotar (-6deg);
-Moz-Transform: rotar (-6deg);
}
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;
}
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;
}
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;
}
</style>
<Link href =? Family = Reenie+Beanie: regular rel = stylesheet type = text/css>
</ablo>
<Body>
<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>
</body>
</html>