O que este artigo mostrará é como usar o HTML5/CSS3 para criar uma página HTML com notas adesivas em apenas 5 etapas. As renderizações são as seguintes:
(Nota: o texto na imagem é puramente fabricado e engraçado. Se houver alguma semelhança, é puramente uma coincidência, obrigado!)
Nota: Este efeito pode ser visto no Safari, Chrome, Firefox e Opera. Como o suporte ao HTML5 não está completo no IE, o efeito não pode ser visto.
Etapa 1: Crie o HTML e os quadrados básicos
Primeiro, adicione a estrutura básica HTML e construa o quadrado básico, o código é o seguinte:
<ul>
<li> <a href = "#">
<H2> dudu: </h2>
<p> Por que não houve postagens bonitas recentemente? Definitivamente vou dar uma recomendação de manchete, recomendo! Recomendar! </p>
</a> </li>
<li> <a href = "#">
<H2> tio Tom: </h2>
<p> Um membro da equipe foi para a Microsoft para fazer SDE3, e ele teve que contratar um novo membro novamente </p>
</a> </li>
<li> <a href = "#">
<H2> Irmão técnico: </h2>
<p> O2DS é o mesmo que o livro que traduzi. Devo traduzi -lo mais rápido que ele. Trabalhe horas extras à noite, rápido! rápido! rápido! </p>
</a> </li>
<li> <a href = "#">
<H2> Artech: </h2>
<p> Existem tão poucas postagens no WCF. Parece que tenho que postar mais postagens para todos aprenderem </p>
</a> </li>
<li> <a href = "#">
<H2> jirigala: </h2>
<p> Para fazer gerenciamento de permissão e gerenciamento de fluxo de trabalho ao extremo da minha capacidade, uma pessoa pode fazer apenas tão poucas coisas bem </p>
</a> </li>
<li> <a href = "#">
<H2> Um mestre das artes marciais: </h2>
<p> Eu nunca irei à entrevista por menos de 25.000 yuan, é avó </p>
</a> </li>
</ul>
Cada nota adiciona uma conexão HREF, principalmente para suportar o acesso ao teclado, e o código CSS é o seguinte:
*{
margem: 0;
preenchimento: 0;
}
corpo{
Fonte-família: Arial, sem serrif;
tamanho de fonte: 100%;
margem: 3em;
Antecedentes:#666;
Cor: #ffff;
}
H2, P {
tamanho de fonte: 100%;
peso-fonte: normal;
}
ul, li {
estilo de lista: nenhum;
}
ul {
estouro: oculto;
preenchimento: 3em;
}
ul li a {
Decoração de texto: Nenhum;
Cor:#000;
Antecedentes: #FFC;
exibição: bloco;
Altura: 10em;
largura: 10em;
preenchimento: 1em;
}
ul li {
margem: 1em;
flutuar: esquerda;
}
Os efeitos são os seguintes:
Etapa 2: sombras e personagens cursivos manuscritos
Esta etapa é realizar o efeito de sombra dos quadrados e alterar a fonte para Sage (somente em inglês). Como o Google fornece suporte para a API de fontes, podemos usá -la diretamente. Primeiro, adicione uma chamada à API do Google:
)
Em seguida, defina a referência para esta fonte:
ul li h2
{
tamanho de fonte: 140%;
Peso da fonte: negrito;
Botting-Bottom: 10px;
}
ul li p
{
Font-Family: "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
tamanho de fonte: 110%;
}
Em relação às sombras, como cada navegador não os suporta totalmente, eles precisam ser processados separadamente e o código é o seguinte:
ul li a
{
Decoração de texto: Nenhum;
Cor: #000;
Antecedentes: #FFC;
exibição: bloco;
Altura: 10em;
largura: 10em;
preenchimento: 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); / * Opera */
Shadow Box: 5px 5px 7px RGBA (33,33,33, .7);
}
Os efeitos são os seguintes:
Etapa 3: incline o quadrado
Para inclinar o quadrado, precisamos adicionar o seguinte código em Li-> A:
ul li a {
-webkit-transform: girate (-6deg);
-o-transform: girate (-6deg);
-moz-transform: girate (-6deg);
}
Mas, para fazer a inclinação quadrada aleatoriamente, em vez de todas as inclinações, precisamos usar o novo seletor CSS3, de modo que o quadrado incline 4 graus a cada 2, negativo 3 graus a cada 3 e 5 graus a cada 6:
ul li: nés-filho (uniforme) um {
-o-transform: girate (4deg);
-webkit-transform: girate (4deg);
-moz-transform: girate (4deg);
Posição: relativa;
topo: 5px;
}
ul li: nés-filho (3n) a {
-o-transform: girate (-3deg);
-webkit-transform: girate (-3deg);
-moz-transform: girate (-3deg);
Posição: relativa;
topo: -5px;
}
ul li: nés-filho (5n) a {
-o-transform: girate (5deg);
-Webkit-transform: girate (5deg);
-moz-transform: girate (5deg);
Posição: relativa;
topo: -10px;
}
Os efeitos são os seguintes:
Etapa 4: Escalando o quadrado quando o mouse e foco
Para alcançar o efeito de escala quando o mouse e o foco, precisamos adicionar o seguinte código:
Ul Li A: Passe o mouse, ul li a: foco {
-Moz-Box-Shadow: 10px 10px 7px RGBA (0,0,0, .7);
-Webkit-box-shadow: 10px 10px 7px rgba (0,0,0, .7);
Shadow de caixa: 10px 10px 7px RGBA (0,0,0, .7);
-Webkit-transform: escala (1,25);
-moz-transform: escala (1,25);
-O-transform: escala (1,25);
Posição: relativa;
Index z: 5;
}
Definir o Index Z como 5 é permitir que o quadrado cubra outros quadrados durante o aumento. Ao mesmo tempo, como o foco também está definido, ele também suporta acesso à troca de teclas da guia, e o efeito é o seguinte:
Etapa 5: Transição suave e adicione cores
Os efeitos especiais no quarto passo parecem um pouco rígidos. Podemos adicionar transição para obter um efeito de animação suave. Além disso, as cores são relativamente únicas. Podemos definir cores diferentes. Primeiro, adicione a transição em ul-> li-> a:
-moz-transição: -moz-transform .15s linear;
-O-transição: -o-transform .15s linear;
-Webkit-transição: -webkit-transform .15s linear;
Em seguida, defina cores diferentes em pares e 3n:
ul li: nés-filho (uniforme) um {
-o-transform: girate (4deg);
-webkit-transform: girate (4deg);
-moz-transform: girate (4deg);
Posição: relativa;
topo: 5px;
Antecedentes: #cfc;
}
ul li: nés-filho (3n) a {
-o-transform: girate (-3deg);
-webkit-transform: girate (-3deg);
-moz-transform: girate (-3deg);
Posição: relativa;
topo: -5px;
Antecedentes: #ccf;
}
Dessa forma, nosso efeito final é realizado:
Resumir
Nesse ponto, usamos os recursos básicos do HTML5 e CSS3 para criar um bom efeito de postagem de anotações. HTML5/CSS3 é realmente muito poderoso. Se você adicionar alguns recursos avançados, como combiná -los com JavaScript, poderá obter um efeito mais impressionante. Pode ser visto nos artigos da série de laboratório HTML5 fornecidos a você por Diante Brick.
Além disso: o texto na imagem é puramente fabricado. Se houver alguma semelhança, é puramente uma coincidência. Obrigado!