Emojis Animados com CSS


Oie... é, eu sei que sumi de novo, mas, como disse a vocês em postagens anteriores, meu chá de sumiço tem a ver com cuidados com minha saúde, que graças a Deus, vai melhorando cada dia mais. Estava com saudades de vocês e de postar aqui, portanto...
Usar emojis em postagens é bem útil e eles geralmente vêm incorporados às redes sociais e blogs ou são encontrados em forma de imagens animadas ou não pela web. Mas, usando css e html você mesmo pode criar os seus.
Encontrei algumas sugestões no Codepen e uma das que mais gostei foi essa aqui. Fiz algumas modificações no código original e consegui transformar os sapinhos em... bem, a intenção era fazer ursos, só que não achei que ficou com cara de urso, tá mais para um monstrinho fofo, depois, quando os deixei rosa, me lembrou o pokemon jigglypuff...
Enfim, caso queiram usar, basta copiar um destes códigos:

Clique na primeira estrela rosa que aparece na caixa de códigos para copiar tudo de uma vez. O CÓDIGO 1, você deve colar no html do seu template antes de /b:skin. O CÓDIGO 2 deve ser colado onde quiser que o emoji apareça.
Para usar 1 emoji de cada vez, encontre o número correspondente ao emoji e use seu html. Por exemplo, se quiser usar o segundo emoji, procure por emojii #2 ou poke #2. Onde quiser que ele apareça cole:
<!--emojii #2-->
    <div class="emojii">
      <div class="bear" id="bear-2">
       
        <div class="bolinha">
          <div class="blush"></div>
          <div class="mouth big-mouth"></div>
        </div>
       
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
Basta encontrar o número do emoji de 1-9. Se quiser editá-los, no html do seu template procure pelo número, por exemplo bear-2 ou jigglypuff-2 e altere como preferir.
Vai aparecer assim:

Espero que gostem :3






Postar um comentário

0 Comentários

up