Esse é apenas um blog de testes. Veja os tutoriais em: http://reinokawaii.blogspot.com

CSS Urso Emoji

Z
Z
Z

CÓDIGO 1

view sourceprint?
0001/* Created by fox_hover codepen.io/fox_hover/pen/JNjYNj */
0002/* Editado por Roberta reinokawaii.blogspot.com */
0003/* emojii main styles !!!YOU NEED THEM */
0004.emojii {
0005  height: 58px;
0006position: relative;
0007width: 70px;
0008display: inline-block;
0009}
0010.emojii .bear {
0011  top: 0;
0012  left: 0;
0013  width: 10%;
0014  height: 10%;
0015}
0016/*corpo*/
0017.emojii .bear .bolinha {
0018  width: 70px;
0019  height: 56px;
0020  background-color: antiquewhite;
0021  border-radius: 100%;
0022  position: absolute;
0023  top: 25px;
0024  left: 0;
0025  right: 0;
0026  margin: auto;
0027    box-shadow: 0px 0px 5px 0px rgb(249, 221, 184);
0028}
0029/*bocao*/
0030.emojii .bear .bolinha .mouth {
0031  margin: auto;
0032}
0033.emojii .bear .bolinha .big-mouth {
0034  width: 10px;
0035  height: 6px;
0036  border-radius: 0 0 50% 50%;
0037}
0038/*blush*/
0039.emojii .bear .bolinha .blush {
0040  width: 45px;
0041  height: 9px;
0042  position: absolute;
0043  top: 35px;
0044  left: 0;
0045  right: 0;
0046  margin: auto;
0047}
0048.emojii .bear .bolinha .blush:before, .emojii .bear .bolinha .blush:after {
0049  content: "";
0050  display: block;
0051  width: 12px;
0052  height: 100%;
0053  background-color: #fcc;
0054  border-radius: 50%;
0055}
0056.emojii .bear .bolinha .blush:before {
0057  position: absolute;
0058  top: 0;
0059  left: 0;
0060}
0061.emojii .bear .bolinha .blush:after {
0062  position: absolute;
0063  top: 0;
0064  right: 0;
0065}
0066/*orelhas*/
0067.emojii .bear .eyes {
0068  width: 1px;
0069  height: 5px;
0070  position: absolute;
0071  top: 18px;
0072  left: 0;
0073  right: 0;
0074  margin: auto;
0075}
0076.emojii .bear .eyes .eye {
0077  width: 38px;
0078  height: 30px;
0079}
0080.emojii .bear .eyes .eye:before {
0081  content: "";
0082  display: block;
0083  width: 100%;
0084  height: 100%;
0085  background-color: antiquewhite;
0086  border-radius: 100%;
0087}
0088.emojii .bear .eyes .eye.wink .eye-inner {
0089  background-color: transparent;
0090  width: 0px;
0091height: 1px;
0092background-color: #debbbb;
0093border-radius: 0;
0094position: absolute;
0095top: 30px;
0096left: 14px;
0097right: 0;
0098margin: auto;
0099-webkit-transform: rotate(169deg);
0100transform: rotate(169deg);
0101}
0102.emojii .bear .eyes .eye.wink .eye-inner:before, .emojii .bear .eyes .eye.wink .eye-inner:after {
0103content: '';
0104display: block;
0105width: 12px;
0106height: 1px;
0107background-color: #debbbb;
0108}
0109.emojii .bear .eyes .eye.wink .eye-inner:before {
0110  -webkit-transform: rotate(225deg);
0111          transform: rotate(225deg);
0112  position: absolute;
0113  top: -4px;
0114  left: 0;
0115}
0116.emojii .bear .eyes .eye.wink .eye-inner:after {
0117  -webkit-transform: rotate(-25deg);
0118          transform: rotate(-25deg);
0119  position: absolute;
0120  top: 4px;
0121  left: 0;
0122}
0123.emojii .bear .eyes .eye.wink .pupil {
0124  display: none;
0125}
0126.emojii .bear .eyes .eye.extra-light .light {
0127  width: 40%;
0128  height: 40%;
0129}
0130.emojii .bear .eyes .eye.extra-light .light:before {
0131  content: "";
0132  display: block;
0133  width: 70%;
0134  height: 70%;
0135  background-color: #fff;
0136  border-radius: 50%;
0137}
0138.emojii .bear .eyes .eye .eye-inner {
0139  background-color: #fff;
0140  width: 40%;
0141height: 60%;
0142position: absolute;
0143top: 70%;
0144left: 29%;
0145border-radius: 100%;
0146}
0147.emojii .bear .eyes .eye .eye-inner .pupil {
0148  background-color: #C6AA72;
0149width: 100%;
0150height: 90%;
0151position: absolute;
0152top: 10%;
0153left: 10%;
0154border-radius: 80%;
0155}
0156.emojii .bear .eyes .eye .eye-inner .pupil .light {
0157  background-color: #fff;
0158  width: 50%;
0159  height: 50%;
0160  position: absolute;
0161  top: 10%;
0162  left: 10%;
0163  border-radius: 50%;
0164}
0165.emojii .bear .eyes .eye-left {
0166  position: absolute;
0167  top: 4px;
0168  left: 0;
0169}
0170.emojii .bear .eyes .eye-right {
0171  position: absolute;
0172  top: 4px;
0173  right: 0;
0174}
0175 
0176/* emojii-1 styles */
0177.bear#bear-1 .bolinha .mouth {
0178  width: 8px;
0179height: 22px;
0180border-bottom: 3px solid #fcc;
0181position: absolute;
0182top: 14px;
0183  left: 0;
0184  right: 0;
0185  -webkit-animation: smile 3.8s linear 0s infinite;
0186          animation: smile 3.8s linear 0s infinite;
0187}
0188@-webkit-keyframes smile {
0189  0% {
0190    border-radius: 0%;
0191  }
0192  20% {
0193    border-radius: 50%;
0194  }
0195  70% {
0196    border-radius: 50%;
0197  }
0198}
0199@keyframes smile {
0200  0% {
0201    border-radius: 0%;
0202  }
0203  20% {
0204    border-radius: 50%;
0205  }
0206  70% {
0207    border-radius: 50%;
0208  }
0209}
0210/* emojii-2 styles */
0211.bear#bear-2 .mouth {
0212  background-color: #fff;
0213  position: absolute;
0214  top: 30px;
0215  left: 0;
0216  right: 0;
0217}
0218.bear#bear-2 .eye-inner {
0219  top: 70%;
0220  background-color: transparent !important;
0221  -webkit-animation: hearts 0.6s linear 0s infinite alternate;
0222          animation: hearts 0.6s linear 0s infinite alternate;
0223}
0224@-webkit-keyframes hearts {
0225  0% {
0226    -webkit-transform: scale(0.7);
0227            transform: scale(0.7);
0228  }
0229  100% {
0230    -webkit-transform: scale(1);
0231            transform: scale(1);
0232  }
0233}
0234@keyframes hearts {
0235  0% {
0236    -webkit-transform: scale(0.7);
0237            transform: scale(0.7);
0238  }
0239  100% {
0240    -webkit-transform: scale(1);
0241            transform: scale(1);
0242  }
0243}
0244.bear#bear-2 .eye-inner:before, .bear#bear-2 .eye-inner:after {
0245  content: "";
0246display: block;
0247height: 45%;
0248width: 30%;
0249background-color: #c6aa72;
0250border-radius: 50% 50% 0 0;
0251}
0252.bear#bear-2 .eye-inner:before {
0253  position: absolute;
0254top: 0;
0255left: 5px;
0256-webkit-transform: rotate(-45deg);
0257transform: rotate(-45deg);
0258}
0259.bear#bear-2 .eye-inner:after {
0260  position: absolute;
0261  top: 0;
0262  right: 5px;
0263  -webkit-transform: rotate(45deg);
0264          transform: rotate(45deg);
0265}
0266.bear#bear-2 .eye-inner .pupil {
0267  display: none;
0268}
0269.bear#bear-2 .blush {
0270  top: 28px !important;
0271} 
0272/* emojii-3 styles */
0273.bear#bear-3 .eye-right .light {
0274  position: absolute;
0275  top: 10%;
0276  left: auto;
0277  right: 10%;
0278}
0279.bear#bear-3 .mouth {
0280  width: 15px;
0281height: 15px;
0282position: absolute;
0283top: 30px;
0284left: 10px;
0285  right: 0;
0286  -webkit-transform: rotate(23deg);
0287          transform: rotate(23deg);
0288}
0289.bear#bear-3 .mouth:before {
0290  content: "";
0291display: block;
0292border-bottom: 3px solid #fcc;
0293width: 100%;
0294height: 100%;
0295border-radius: 50%;
0296background-color: antiquewhite;
0297z-index: 3;
0298position: absolute;
0299top: 0px;
0300left: 0;
0301}
0302.bear#bear-3 .toungue {
0303  width: 10px;
0304  height: 16px;
0305  background-color: #fcc;
0306  border-radius: 30px;
0307  z-index: 2;
0308  position: absolute;
0309  top: 7px;
0310  left: 4px;
0311  -webkit-transform-origin: center top;
0312          transform-origin: center top;
0313  -webkit-animation: toungue 2.0s linear 0s infinite;
0314          animation: toungue 2.0s linear 0s infinite;
0315}
0316@-webkit-keyframes toungue {
0317  0% {
0318    -webkit-transform: scale(1, 1);
0319            transform: scale(1, 1);
0320  }
0321  40% {
0322    -webkit-transform: scale(1, 1);
0323            transform: scale(1, 1);
0324  }
0325  75% {
0326    -webkit-transform: scale(1, 0);
0327            transform: scale(1, 0);
0328  }
0329}
0330@keyframes toungue {
0331  0% {
0332    -webkit-transform: scale(1, 1);
0333            transform: scale(1, 1);
0334  }
0335  40% {
0336    -webkit-transform: scale(1, 1);
0337            transform: scale(1, 1);
0338  }
0339  75% {
0340    -webkit-transform: scale(1, 0);
0341            transform: scale(1, 0);
0342  }
0343}
0344.bear#bear-3 .toungue:before {
0345  content: "";
0346  display: block;
0347  width: 2px;
0348  height: 4px;
0349  background-color: #fcc;
0350  position: absolute;
0351  left: 0px;
0352  right: 0px;
0353  bottom: 5px;
0354  margin: auto;
0355  opacity: 0.4;
0356}
0357 
0358/* emojii-4 styles */
0359.bear#bear-4 .eye .light {
0360  position: absolute;
0361  top: 9px;
0362  left: 0px;
0363}
0364.bear#bear-4 .eye .light:before {
0365  position: absolute;
0366  top: -5px;
0367  left: 0px;
0368}
0369.bear#bear-4 .mouth {
0370  position: absolute;
0371  top: 30px;
0372  left: 0;
0373  right: 0;
0374  background-color: #ec7977;
0375  overflow: hidden;
0376  -webkit-transform-origin: center top;
0377          transform-origin: center top;
0378  -webkit-animation: laugh 1.9s linear 0s infinite;
0379          animation: laugh 1.9s linear 0s infinite;
0380}
0381@-webkit-keyframes laugh {
0382  0% {
0383    -webkit-transform: scale(1, 0);
0384            transform: scale(1, 0);
0385  }
0386  30% {
0387    -webkit-transform: scale(1, 1);
0388            transform: scale(1, 1);
0389  }
0390  40% {
0391    -webkit-transform: scale(1, 0.6);
0392            transform: scale(1, 0.6);
0393  }
0394  50% {
0395    -webkit-transform: scale(1, 1);
0396            transform: scale(1, 1);
0397  }
0398  60% {
0399    -webkit-transform: scale(1, 0.6);
0400            transform: scale(1, 0.6);
0401  }
0402  70% {
0403    -webkit-transform: scale(1, 1);
0404            transform: scale(1, 1);
0405  }
0406}
0407@keyframes laugh {
0408  0% {
0409    -webkit-transform: scale(1, 0);
0410            transform: scale(1, 0);
0411  }
0412  30% {
0413    -webkit-transform: scale(1, 1);
0414            transform: scale(1, 1);
0415  }
0416  40% {
0417    -webkit-transform: scale(1, 0.6);
0418            transform: scale(1, 0.6);
0419  }
0420  50% {
0421    -webkit-transform: scale(1, 1);
0422            transform: scale(1, 1);
0423  }
0424  60% {
0425    -webkit-transform: scale(1, 0.6);
0426            transform: scale(1, 0.6);
0427  }
0428  70% {
0429    -webkit-transform: scale(1, 1);
0430            transform: scale(1, 1);
0431  }
0432}
0433.bear#bear-4 .mouth .toungue {
0434  width: 17px;
0435  height: 17px;
0436  background-color: #C71F1C;
0437  border-radius: 20px;
0438  position: absolute;
0439  top: 9px;
0440  left: 3;
0441  -webkit-transform: rotate(20deg);
0442          transform: rotate(20deg);
0443}
0444 
0445/* emojii-5 styles */
0446@-webkit-keyframes eyes-1 {
0447  0% {
0448    -webkit-transform: scale(1, 1);
0449            transform: scale(1, 1);
0450    opacity: 1;
0451  }
0452  20% {
0453    -webkit-transform: scale(0, 0);
0454            transform: scale(0, 0);
0455    opacity: 0;
0456  }
0457  70% {
0458    -webkit-transform: scale(0, 0);
0459            transform: scale(0, 0);
0460    opacity: 0;
0461  }
0462  80% {
0463    -webkit-transform: scale(1, 1);
0464            transform: scale(1, 1);
0465    opacity: 1;
0466  }
0467}
0468@keyframes eyes-1 {
0469  0% {
0470    -webkit-transform: scale(1, 1);
0471            transform: scale(1, 1);
0472    opacity: 1;
0473  }
0474  20% {
0475    -webkit-transform: scale(0, 0);
0476            transform: scale(0, 0);
0477    opacity: 0;
0478  }
0479  70% {
0480    -webkit-transform: scale(0, 0);
0481            transform: scale(0, 0);
0482    opacity: 0;
0483  }
0484  80% {
0485    -webkit-transform: scale(1, 1);
0486            transform: scale(1, 1);
0487    opacity: 1;
0488  }
0489}
0490@-webkit-keyframes eyes-2 {
0491  0% {
0492    opacity: 0;
0493    position: absolute;
0494    top: 60%;
0495    left: 20%;
0496  }
0497  28% {
0498    opacity: 1;
0499    position: absolute;
0500    top: 60%;
0501    left: 20%;
0502  }
0503  70% {
0504    opacity: 1;
0505    position: absolute;
0506    top: 60%;
0507    left: 20%;
0508  }
0509  78% {
0510    opacity: 0;
0511    position: absolute;
0512    top: 60%;
0513    left: 20%;
0514  }
0515}
0516@keyframes eyes-2 {
0517  0% {
0518    opacity: 0;
0519    position: absolute;
0520    top: 60%;
0521    left: 20%;
0522  }
0523  28% {
0524    opacity: 1;
0525    position: absolute;
0526    top: 60%;
0527    left: 20%;
0528  }
0529  70% {
0530    opacity: 1;
0531    position: absolute;
0532    top: 60%;
0533    left: 20%;
0534  }
0535  78% {
0536    opacity: 0;
0537    position: absolute;
0538    top: 60%;
0539    left: 20%;
0540  }
0541}
0542@-webkit-keyframes blush {
0543  0% {
0544    opacity: 0;
0545  }
0546  20% {
0547    opacity: 1;
0548  }
0549  70% {
0550    opacity: 1;
0551  }
0552  80% {
0553    opacity: 0;
0554  }
0555}
0556@keyframes blush {
0557  0% {
0558    opacity: 0;
0559  }
0560  20% {
0561    opacity: 1;
0562  }
0563  70% {
0564    opacity: 1;
0565  }
0566  80% {
0567    opacity: 0;
0568  }
0569}
0570.bear#bear-5 .eye:after {
0571  content: "";
0572  display: block;
0573  width: 60%;
0574  height: 100%;
0575  border-top: 3px solid #fcc;
0576  border-radius: 50%;
0577  position: absolute;
0578  top: 10%;
0579  left: 20%;
0580  opacity: 0;
0581  -webkit-animation: eyes-2 2.8s linear 0s infinite;
0582          animation: eyes-2 2.8s linear 0s infinite;
0583}
0584.bear#bear-5 .eye .eye-inner {
0585  -webkit-transform-origin: center center;
0586          transform-origin: center center;
0587  -webkit-animation: eyes-1 2.8s linear 0s infinite;
0588          animation: eyes-1 2.8s linear 0s infinite;
0589}
0590.bear#bear-5 .blush {
0591  top: 25px !important;
0592  opacity: 0;
0593  -webkit-animation: blush 2.8s linear 0s infinite;
0594          animation: blush 2.8s linear 0s infinite;
0595}
0596.bear#bear-5 .mouth {
0597  width: 6px;
0598  height: 26px;
0599  border-bottom: 10px solid #fff;
0600  border-radius: 20px;
0601}
0602 
0603/* emojii-6 styles */
0604@-webkit-keyframes eyes-big-light {
0605  0% {
0606    position: absolute;
0607    top: 10%;
0608    left: 10%;
0609    right: auto;
0610    bottom: auto;
0611  }
0612  20% {
0613    position: absolute;
0614    top: auto;
0615    left: auto;
0616    right: 10%;
0617    bottom: 10%;
0618  }
0619  70% {
0620    position: absolute;
0621    top: auto;
0622    left: auto;
0623    right: 10%;
0624    bottom: 10%;
0625  }
0626  80% {
0627    position: absolute;
0628    top: 10%;
0629    left: 10%;
0630    right: auto;
0631    bottom: auto;
0632  }
0633}
0634@keyframes eyes-big-light {
0635  0% {
0636    position: absolute;
0637    top: 10%;
0638    left: 10%;
0639    right: auto;
0640    bottom: auto;
0641  }
0642  20% {
0643    position: absolute;
0644    top: auto;
0645    left: auto;
0646    right: 10%;
0647    bottom: 10%;
0648  }
0649  70% {
0650    position: absolute;
0651    top: auto;
0652    left: auto;
0653    right: 10%;
0654    bottom: 10%;
0655  }
0656  80% {
0657    position: absolute;
0658    top: 10%;
0659    left: 10%;
0660    right: auto;
0661    bottom: auto;
0662  }
0663}
0664@-webkit-keyframes eyes-small-light {
0665  0% {
0666    opacity: 0;
0667  }
0668  23% {
0669    opacity: 1;
0670  }
0671  70% {
0672    opacity: 1;
0673  }
0674  75% {
0675    opacity: 0;
0676  }
0677}
0678@keyframes eyes-small-light {
0679  0% {
0680    opacity: 0;
0681  }
0682  23% {
0683    opacity: 1;
0684  }
0685  70% {
0686    opacity: 1;
0687  }
0688  75% {
0689    opacity: 0;
0690  }
0691}
0692@keyframes blush {
0693  0% {
0694    opacity: 0;
0695  }
0696  20% {
0697    opacity: 1;
0698  }
0699  70% {
0700    opacity: 1;
0701  }
0702  80% {
0703    opacity: 0;
0704  }
0705}
0706.bear#bear-6 .eye .light {
0707  -webkit-animation: eyes-big-light 2.8s linear 0s infinite;
0708          animation: eyes-big-light 2.8s linear 0s infinite;
0709}
0710.bear#bear-6 .eye .light:before {
0711  position: absolute;
0712  top: -5px;
0713  left: 5px;
0714  opacity: 0;
0715  -webkit-animation: eyes-small-light 2.8s linear 0s infinite;
0716          animation: eyes-small-light 2.8s linear 0s infinite;
0717}
0718.bear#bear-6 .blush {
0719  opacity: 0;
0720  -webkit-animation: blush 2.8s linear 0s infinite;
0721          animation: blush 2.8s linear 0s infinite;
0722}
0723.bear#bear-6 .mouth {
0724 
0725  width: 16px;
0726  height: 16px;
0727  border-bottom: 10px solid antiquewhite;
0728  border-radius: 20px;
0729}
0730 
0731 
0732/* emojii-7 styles */
0733.bear#bear-7 .eye:after {
0734  content: "";
0735  display: block;
0736  width: 30%;
0737  height: 60%;
0738  border-bottom: 3px solid #fcc;
0739  border-radius: 50%;
0740  position: absolute;
0741  top: 20px;
0742  left: 35%;
0743}
0744.bear#bear-7 .eye-left:after {
0745  -webkit-transform: rotate(-12deg);
0746          transform: rotate(-12deg);
0747}
0748.bear#bear-7 .eye-right:after {
0749  -webkit-transform: rotate(12deg);
0750          transform: rotate(12deg);
0751}
0752.bear#bear-7 .eye-inner {
0753  display: none;
0754}
0755@-webkit-keyframes mouth {
0756  0% {
0757    -webkit-transform: scale(0.7);
0758            transform: scale(0.7);
0759  }
0760  60% {
0761    -webkit-transform: scale(1);
0762            transform: scale(1);
0763  }
0764}
0765@keyframes mouth {
0766  0% {
0767    -webkit-transform: scale(0.7);
0768            transform: scale(0.7);
0769  }
0770  60% {
0771    -webkit-transform: scale(1);
0772            transform: scale(1);
0773  }
0774}
0775.bear#bear-7 .mouth {
0776  height: 11px;
0777  width: 7px;
0778  background-color: #fff;
0779  border-radius: 0% 50% 50% 50%;
0780  position: absolute;
0781  top: 36px;
0782  left: 0px;
0783  right: 0px;
0784  -webkit-transform: scale(0.7);
0785          transform: scale(0.7);
0786  -webkit-transform-origin: center top;
0787          transform-origin: center top;
0788  -webkit-animation: mouth 2s linear 0s infinite;
0789          animation: mouth 2s linear 0s infinite;
0790}
0791.bear#bear-7 .sleepy-emojiis {
0792  width: 34px;
0793  height: 50px;
0794  position: absolute;
0795  top: 0px;
0796  left: 0px;
0797  z-index: 10;
0798  color: #fcc;
0799  font-weight: bold;
0800}
0801@-webkit-keyframes sleepy-emojiis {
0802  0% {
0803    opacity: 0;
0804  }
0805  100% {
0806    opacity: 1;
0807  }
0808}
0809@keyframes sleepy-emojiis {
0810  0% {
0811    opacity: 0;
0812  }
0813  100% {
0814    opacity: 1;
0815  }
0816}
0817.bear#bear-7 .sleepy-emojiis div {
0818  text-shadow: 2px 2px 0px rgba(63, 106, 52, 0.3);
0819  -webkit-transform: rotate(-15deg);
0820          transform: rotate(-15deg);
0821  opacity: 0;
0822}
0823.bear#bear-7 .sleepy-emojiis div:nth-child(1) {
0824  position: absolute;
0825  top: 5px;
0826  left: 10px;
0827  font-size: 16px;
0828  -webkit-animation: sleepy-emojiis 1s linear 0s infinite alternate;
0829          animation: sleepy-emojiis 1s linear 0s infinite alternate;
0830}
0831.bear#bear-7 .sleepy-emojiis div:nth-child(2) {
0832  position: absolute;
0833  top: -6px;
0834  left: -6px;
0835  font-size: 12px;
0836  -webkit-animation: sleepy-emojiis 1s linear 0.5s infinite alternate;
0837          animation: sleepy-emojiis 1s linear 0.5s infinite alternate;
0838}
0839.bear#bear-7 .sleepy-emojiis div:nth-child(3) {
0840  position: absolute;
0841  top: -30px;
0842  left: -10px;
0843  font-size: 19px;
0844  -webkit-animation: sleepy-emojiis 1s linear 1s infinite alternate;
0845          animation: sleepy-emojiis 1s linear 1s infinite alternate;
0846}
0847 
0848 
0849/* emojii-8 styles */
0850.bear#bear-8 .eye:after {
0851  content: "";
0852  display: block;
0853  width: 50%;
0854  height: 50%;
0855  border-bottom: 3px solid #fcc;
0856  border-radius: 50%;
0857  position: absolute;
0858  top: 20px;
0859  left: 0px;
0860  right: 0px;
0861  margin: auto;
0862}
0863.bear#bear-8 .eye .eye-inner {
0864  display: none;
0865}
0866.bear#bear-8 .mouth {
0867  width: 2px;
0868  height: 2px;
0869  border-top: 2px solid antiquewhite;
0870  border-radius: 50%;
0871  position: absolute;
0872  top: 26px;
0873  left: 0px;
0874  right: 0px;
0875}
0876.bear#bear-8 .tear {
0877  width: 10px;
0878  height: 10px;
0879  background-color: #8ffef0;
0880  border-radius: 0px 50% 50% 50%;
0881  position: absolute;
0882  top: 26px;
0883  left: 1px;
0884  z-index: 10;
0885  -webkit-animation: tear 1.8s linear 0s infinite;
0886          animation: tear 1.8s linear 0s infinite;
0887}
0888@-webkit-keyframes tear {
0889  0% {
0890    top: 6px;
0891    -webkit-transform: scale(0.4) rotate(45deg);
0892            transform: scale(0.4) rotate(45deg);
0893  }
0894  100% {
0895    top: 85%;
0896    -webkit-transform: scale(1) rotate(45deg);
0897            transform: scale(1) rotate(45deg);
0898  }
0899}
0900@keyframes tear {
0901  0% {
0902    top: 6px;
0903    -webkit-transform: scale(0.4) rotate(45deg);
0904            transform: scale(0.4) rotate(45deg);
0905  }
0906  100% {
0907    top: 85%;
0908    -webkit-transform: scale(1) rotate(45deg);
0909            transform: scale(1) rotate(45deg);
0910  }
0911}
0912.bear#bear-8 .tear:before {
0913  content: "";
0914  display: block;
0915  width: 90%;
0916  height: 90%;
0917  background-color: #01f3d3;
0918  border-radius: 0px 50% 50% 50%;
0919  position: absolute;
0920  top: 0px;
0921  left: 0px;
0922}
0923 
0924/* emojii-9 styles */
0925@-webkit-keyframes angry-bear-bg {
0926  0% {
0927    background-color: white;
0928  }
0929  30% {
0930    background-color: antiquewhite;
0931  }
0932  70% {
0933    background-color: #fcc;
0934  }
0935  80% {
0936    background-color: white;
0937  }
0938}
0939@keyframes angry-bear-bg {
0940  0% {
0941    background-color: white;
0942  }
0943  30% {
0944    background-color: antiquewhite;
0945  }
0946  70% {
0947    background-color: #fcc;
0948  }
0949  80% {
0950    background-color: white;
0951  }
0952}
0953@-webkit-keyframes angry-eyes {
0954  0% {
0955    -webkit-transform: scale(1);
0956            transform: scale(1);
0957  }
0958  30% {
0959    -webkit-transform: scale(0.6);
0960            transform: scale(0.6);
0961  }
0962  70% {
0963    -webkit-transform: scale(0.6);
0964            transform: scale(0.6);
0965  }
0966  80% {
0967    -webkit-transform: scale(1);
0968            transform: scale(1);
0969  }
0970}
0971@keyframes angry-eyes {
0972  0% {
0973    -webkit-transform: scale(1);
0974            transform: scale(1);
0975  }
0976  30% {
0977    -webkit-transform: scale(0.6);
0978            transform: scale(0.6);
0979  }
0980  70% {
0981    -webkit-transform: scale(0.6);
0982            transform: scale(0.6);
0983  }
0984  80% {
0985    -webkit-transform: scale(1);
0986            transform: scale(1);
0987  }
0988}
0989@-webkit-keyframes angry-brows-mouth {
0990  0% {
0991    opacity: 0;
0992  }
0993  37% {
0994    opacity: 1;
0995  }
0996  70% {
0997    opacity: 1;
0998  }
0999  77% {
1000    opacity: 0;
1001  }
1002}
1003@keyframes angry-brows-mouth {
1004  0% {
1005    opacity: 0;
1006  }
1007  37% {
1008    opacity: 1;
1009  }
1010  70% {
1011    opacity: 1;
1012  }
1013  77% {
1014    opacity: 0;
1015  }
1016}
1017.bear#bear-9 .bolinha,
1018.bear#bear-9 .eye:before {
1019  -webkit-animation: angry-bear-bg 2.8s linear 0s infinite;
1020          animation: angry-bear-bg 2.8s linear 0s infinite;
1021}
1022.bear#bear-9 .eye-inner {
1023  -webkit-animation: angry-eyes 2.8s linear 0s infinite;
1024          animation: angry-eyes 2.8s linear 0s infinite;
1025}
1026.bear#bear-9 .eye:after {
1027  content: "";
1028  display: block;
1029  width: 0px;
1030  height: 0px;
1031  background-color: antiquewhite;
1032  position: absolute;
1033  top: 5px;
1034  left: 0;
1035  right: 0;
1036  margin: auto;
1037  -webkit-animation: angry-brows-mouth 2.8s linear 0s infinite;
1038          animation: angry-brows-mouth 2.8s linear 0s infinite;
1039  opacity: 0;
1040}
1041.bear#bear-9 .eye-left:after {
1042  -webkit-transform: rotate(10deg);
1043          transform: rotate(10deg);
1044}
1045.bear#bear-9 .eye-right:after {
1046  -webkit-transform: rotate(-10deg);
1047          transform: rotate(-10deg);
1048}
1049.bear#bear-9 .mouth {
1050  width: 0px;
1051  height: 0px;
1052  border-top: 3px solid antiquewhite;
1053  position: absolute;
1054  top: 6px;
1055  left: 0;
1056  right: 0;
1057  border-radius: 50%;
1058  -webkit-transform: rotate(32deg);
1059          transform: rotate(32deg);
1060  opacity: 0;
1061  -webkit-animation: angry-brows-mouth 2.8s linear 0s infinite;
1062          animation: angry-brows-mouth 2.8s linear 0s infinite;
1063}

CÓDIGO 2

view sourceprint?
001<bolinha>
002  <div class="mojiii">
003   <div class="emoji-mojiii">
004     
005    <!--emojii #1-->
006    <div class="emojii">
007      <div class="bear" id="bear-1">
008         
009        <div class="bolinha">
010          <div class="mouth"></div>
011        </div>
012         
013        <div class="eyes">
014          <div class="eye eye-left">
015            <div class="eye-inner">
016              <div class="pupil">
017                <div class="light"></div>
018              </div>
019            </div>
020          </div>
021          <div class="eye eye-right">
022            <div class="eye-inner">
023              <div class="pupil">
024                <div class="light"></div>
025              </div>
026            </div>
027          </div>
028        </div>
029         
030      </div>
031    </div>
032     
033    <!--emojii #2-->
034    <div class="emojii">
035      <div class="bear" id="bear-2">
036         
037        <div class="bolinha">
038          <div class="blush"></div>
039          <div class="mouth big-mouth"></div>
040        </div>
041         
042        <div class="eyes">
043          <div class="eye eye-left">
044            <div class="eye-inner">
045              <div class="pupil">
046                <div class="light"></div>
047              </div>
048            </div>
049          </div>
050          <div class="eye eye-right">
051            <div class="eye-inner">
052              <div class="pupil">
053                <div class="light"></div>
054              </div>
055            </div>
056          </div>
057        </div>
058         
059      </div>
060    </div>
061     
062    <!--emojii #3-->
063    <div class="emojii">
064      <div class="bear" id="bear-3">
065         
066        <div class="bolinha">
067          <div class="mouth">
068            <div class="toungue"></div>
069          </div>
070        </div>
071         
072        <div class="eyes">
073          <div class="eye eye-left wink">
074            <div class="eye-inner">
075              <div class="pupil">
076                <div class="light"></div>
077              </div>
078            </div>
079          </div>
080          <div class="eye eye-right">
081            <div class="eye-inner">
082              <div class="pupil">
083                <div class="light"></div>
084              </div>
085            </div>
086          </div>
087        </div>
088         
089      </div>
090    </div>
091     
092    <!--emojii #4-->
093    <div class="emojii">
094      <div class="bear" id="bear-4">
095         
096        <div class="bolinha">
097          <div class="mouth big-mouth">
098            <div class="toungue"></div>
099          </div>
100        </div>
101         
102        <div class="eyes">
103          <div class="eye eye-left extra-light">
104            <div class="eye-inner">
105              <div class="pupil">
106                <div class="light"></div>
107              </div>
108            </div>
109          </div>
110          <div class="eye eye-right extra-light">
111            <div class="eye-inner">
112              <div class="pupil">
113                <div class="light"></div>
114              </div>
115            </div>
116          </div>
117        </div>
118         
119      </div>
120    </div>
121     
122    <!--emojii #5-->
123    <div class="emojii">
124      <div class="bear" id="bear-5">
125         
126        <div class="bolinha">
127          <div class="blush"></div>
128          <div class="mouth"></div>
129        </div>
130         
131        <div class="eyes">
132          <div class="eye eye-left">
133            <div class="eye-inner">
134              <div class="pupil">
135                <div class="light"></div>
136              </div>
137            </div>
138          </div>
139          <div class="eye eye-right">
140            <div class="eye-inner">
141              <div class="pupil">
142                <div class="light"></div>
143              </div>
144            </div>
145          </div>
146        </div>
147         
148      </div>
149    </div>
150     
151    <!--emojii #6-->
152    <div class="emojii">
153      <div class="bear" id="bear-6">
154         
155        <div class="bolinha">
156          <div class="blush"></div>
157          <div class="mouth"></div>
158        </div>
159         
160        <div class="eyes">
161          <div class="eye eye-left extra-light">
162            <div class="eye-inner">
163              <div class="pupil">
164                <div class="light"></div>
165              </div>
166            </div>
167          </div>
168          <div class="eye eye-right extra-light">
169            <div class="eye-inner">
170              <div class="pupil">
171                <div class="light"></div>
172              </div>
173            </div>
174          </div>
175        </div>
176         
177      </div>
178    </div>
179         
180    <!--emojii #7-->
181    <div class="emojii">
182      <div class="bear" id="bear-7">
183         
184        <div class="bolinha">
185          <div class="mouth"></div>
186          <div class="sleepy-emojiis">
187            <div>Z</div>
188            <div>Z</div>
189            <div>Z</div>
190          </div>
191        </div>
192         
193        <div class="eyes">
194          <div class="eye eye-left">
195            <div class="eye-inner">
196              <div class="pupil">
197                <div class="light"></div>
198              </div>
199            </div>
200          </div>
201          <div class="eye eye-right">
202            <div class="eye-inner">
203              <div class="pupil">
204                <div class="light"></div>
205              </div>
206            </div>
207          </div>
208        </div>
209         
210      </div>
211    </div>
212     
213     
214    <!--emojii #8-->
215    <div class="emojii">
216      <div class="bear" id="bear-8">
217         
218        <div class="bolinha">
219          <div class="tear"></div>
220          <div class="mouth"></div>
221        </div>
222         
223        <div class="eyes">
224          <div class="eye eye-left">
225            <div class="eye-inner">
226              <div class="pupil">
227                <div class="light"></div>
228              </div>
229            </div>
230          </div>
231          <div class="eye eye-right">
232            <div class="eye-inner">
233              <div class="pupil">
234                <div class="light"></div>
235              </div>
236            </div>
237          </div>
238        </div>
239      </div>
240    </div>
241     
242    <!--emojii #9-->
243    <div class="emojii">
244      <div class="bear" id="bear-9">
245         
246        <div class="bolinha">
247          <div class="mouth"></div>
248        </div>
249         
250        <div class="eyes">
251          <div class="eye eye-left">
252            <div class="eye-inner">
253              <div class="pupil">
254                <div class="light"></div>
255              </div>
256            </div>
257          </div>
258          <div class="eye eye-right">
259            <div class="eye-inner">
260              <div class="pupil">
261                <div class="light"></div>
262              </div>
263            </div>
264          </div>
265        </div>
266      </div>
267    </div>
268     
269  </div>
270</div>
271   
272 
273</bolinha>