Lembra dos desenhos que assistimos quando criança? Naquela época, eles eram a personificação da animação. Agora a animação não é apenas desenho animado, nós a encontramos quase todos os dias, verificando o telefone ou usando qualquer dispositivo que tenha uma tela.
Hoje, a animação é usada não apenas para atrair a atenção, mas também para melhorar a interação do usuário, facilitar a navegação. Em qualquer bom design, a animação é adicionada de forma a combinar com o conceito geral, criando assim uma interface de usuário conveniente.
Neste artigo, criaremos uma animação simples do rosto com diferentes expressões e, no processo, aprenderemos um pouco sobre CSS.
Vamos começar
Usaremos a técnica CSS, que raramente é usada pelos desenvolvedores da Web, mas que os designers geralmente recorrem. Isso se chama mascaramento.
O que vem à mente quando você ouve as palavras "mascarar"? Você provavelmente imaginou algo que obscurece a essência. É tudo o que precisamos saber.
Espere - mas o artigo é sobre como escrever e usar animações CSS ... Sem pânico! Tudo bem!
Crie uma máscara base
Suponha que tenhamos uma tag
div com
background: green; e parece algo como isto:
Há também um arquivo
face.svg :
Se aplicarmos a propriedade CSS
mask-image: url (face.svg); para a tag
div , você ficará surpreso ao ver o resultado:
Você pode pensar que isso é estranho. A imagem face.svg foi colocada em cima da
div , mas assumiu uma cor de fundo. Isso é contrário às nossas expectativas. Isso acontece devido à propriedade do
mask-type , que torna transparente a parte opaca do svg. Assim, a cor do plano de fundo se torna visível.
Não vamos nos aprofundar. Lembre-se de que você pode usar
background-color para alterar a cor da máscara. Se você estiver familiarizado com os vários usos da
background-color de
background-color de
background-color , também poderá aplicar gradientes e escrever um gradiente simples que preencha o centro com vermelho e espalhe radialmente o preto pelas bordas. O código ficará assim:
background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));
O resultado será assim:
Adicionando Animação
Agora adicione animação a esta face vazia. Para fazer isso, use
expression.svg , que você vê na imagem abaixo. Para simplificar, criei todos os arquivos svg da mesma largura e altura, para não precisar alinhar faces e expressões manualmente.
Agora
mask-image tem uma opção interessante que permite usar várias imagens como máscaras. Portanto, podemos fazer isso:
mask-image: url (face.svg), url (expression.svg); . Aqui está o que aconteceu:
Uma das propriedades mais importantes das máscaras CSS é
mask-position , devido à qual a máscara está localizada no canto superior esquerdo em relação ao elemento pai. E posso organizar várias máscaras usando a propriedade
mask-position da
mask-position assim como
mask-image . Para deixar um rosto triste, use algo como isto:
mask-position: 0 0, 0 12px; . Aqui está o que aconteceu.
A primeira posição é
0 0 para
face.svg e a segunda
0 12px é para
expression.svg . Isso levou a uma transferência de 12px e deu ao rosto a expressão necessária.
Aplicando funcionalidade
Agora vamos animar essas expressões em foco. O código completo que obtemos após a aplicação da pseudo-classe hover será assim:
i { background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1)); mask-image: url('face.svg'), url('expression.svg'); mask-position: 0 0, 0 12px; transition: mask-position .5s ease-out; } i:hover { background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1)); mask-position: 0 0, 0 0; transition: mask-position .1s linear; }
Depois de jogar um pouco mais com as propriedades CSS, podemos fazer o seguinte:
Este é um dos métodos que você pode usar para criar animações muito emocionantes que encontramos quase diariamente.
Um ponto importante
O mascaramento pode não funcionar em todos os navegadores. Para fazê-lo funcionar em todos os navegadores, basta adicionar tags especiais, como
-webkit- ,
-moz- e
-0- .
Você pode ver o código completo no
github e
codepen . Obrigada Espero que tenha sido útil.
Dê uma olhada no VPS.today , um site para encontrar servidores virtuais. 1500 tarifas de 130 hosts, uma interface conveniente e um grande número de critérios para encontrar o melhor servidor virtual.