效果如图所示：

不多说，我们直接一个一个来写出，主要列出每个表情的结构，样式我们统一写出，基本全部会用到，颜色以及结构可以根据自己的需求来调整。（里面可是没有一张图片的哦）

页面预览：http://211.140.7.173:8081/t/wuhairui/表情包/

（顶赞）

  1. <div class="emoji  emoji--like">
  2.   <div class="emoji__hand">
  3.       <div class="emoji__thumb"></div>
  4.   </div>
  5. </div>

（喜欢）

  1. <div class="emoji  emoji--love">
  2.   <div class="emoji__heart"></div>
  3. </div>

（哈哈）

  1. <div class="emoji  emoji--haha">
  2.   <div class="emoji__face">
  3.     <div class="emoji__eyes"></div>
  4.     <div class="emoji__mouth">
  5.       <div class="emoji__tongue"></div>
  6.     </div>
  7.   </div>
  8. </div>

（微笑）

  1. <div class="emoji  emoji--yay">
  2.   <div class="emoji__face">
  3.     <div class="emoji__eyebrows"></div>
  4.     <div class="emoji__mouth"></div>
  5.   </div>
  6. </div>

（吃惊）

  1. <div class="emoji  emoji--wow">
  2.   <div class="emoji__face">
  3.     <div class="emoji__eyebrows"></div>
  4.     <div class="emoji__eyes"></div>
  5.     <div class="emoji__mouth"></div>
  6.   </div>
  7. </div>

（哭泣）

  1. <div class="emoji  emoji--sad">
  2.   <div class="emoji__face">
  3.     <div class="emoji__eyebrows"></div>
  4.     <div class="emoji__eyes"></div>
  5.     <div class="emoji__mouth"></div>
  6.   </div>
  7. </div>

（发怒）

  1. <div class="emoji  emoji--angry">
  2.   <div class="emoji__face">
  3.     <div class="emoji__eyebrows"></div>
  4.     <div class="emoji__eyes"></div>
  5.     <div class="emoji__mouth"></div>
  6.   </div>
  7. </div>

最后我们把样式全部列举出来。我们可以根据自己的需求和喜好进行二次调整

  1. .emoji {
  2.   width: 120px;
  3.   height: 120px;
  4.   margin: 15px 15px 40px;
  5.   background: #FFDA6A;
  6.   display: inline-block;
  7.   border-radius: 50%;
  8.   position:relative;
  9. }
  10. .emoji:after {
  11.   position: absolute;
  12.   bottom: -40px;
  13.   font-size: 18px;
  14.   width: 60px;
  15.   left: calc(50% - 30px);
  16.   color: #8A8A8A;
  17. }
  18.  
  19. .emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb {
  20.   position: absolute;
  21. }
  22. .emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after {
  23.   position: absolute;
  24.   content: '';
  25. }
  26.  
  27. .emoji__face {
  28.   width: inherit;
  29.   height: inherit;
  30. }
  31.  
  32. .emoji--like {
  33.   background: #548DFF;
  34. }
  35. .emoji--like:after {
  36.   content: '';
  37. }
  38. .emoji--like .emoji__hand {
  39.   left: 25px;
  40.   bottom: 30px;
  41.   width: 20px;
  42.   height: 40px;
  43.   background: #FFFFFF;
  44.   border-radius: 5px;
  45.   z-index:;
  46.   -webkit-animation: hands-up 2s linear infinite;
  47.           animation: hands-up 2s linear infinite;
  48. }
  49. .emoji--like .emoji__hand:before {
  50.   left: 25px;
  51.   bottom: 5px;
  52.   width: 40px;
  53.   background: inherit;
  54.   height: 10px;
  55.   border-radius: 2px 10px 10px 2px;
  56.   box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;
  57. }
  58. .emoji--like .emoji__thumb {
  59.   border-bottom: 20px solid #FFFFFF;
  60.   border-left: 20px solid transparent;
  61.   top: -25px;
  62.   right: -25px;
  63.   z-index:;
  64.   -webkit-transform: rotate(5deg);
  65.           transform: rotate(5deg);
  66.   -webkit-transform-origin: 0% 100%;
  67.           transform-origin: 0% 100%;
  68.   -webkit-animation: thumbs-up 2s linear infinite;
  69.           animation: thumbs-up 2s linear infinite;
  70. }
  71. .emoji--like .emoji__thumb:before {
  72.   border-radius: 50% 50% 0 0;
  73.   background: #FFFFFF;
  74.   width: 10px;
  75.   height: 12px;
  76.   left: -10px;
  77.   top: -8px;
  78.   -webkit-transform: rotate(-15deg);
  79.           transform: rotate(-15deg);
  80.   -webkit-transform-origin: 100% 100%;
  81.           transform-origin: 100% 100%;
  82.   box-shadow: -1px 4px 0 -1px #FFFFFF;
  83. }
  84.  
  85. .emoji--love {
  86.   background: #F55064;
  87. }
  88. .emoji--love:after {
  89.   content: '';
  90. }
  91. .emoji--love .emoji__heart {
  92.   left: calc(50% - 40px);
  93.   top: calc(50% - 40px);
  94.   width: 80px;
  95.   height: 80px;
  96.   -webkit-animation: heart-beat 1s linear infinite alternate;
  97.           animation: heart-beat 1s linear infinite alternate;
  98. }
  99. .emoji--love .emoji__heart:before, .emoji--love .emoji__heart:after {
  100.   left: calc(50% - 20px);
  101.   top: calc(50% - 32px);
  102.   width: 40px;
  103.   height: 64px;
  104.   background: #FFFFFF;
  105.   border-radius: 20px 20px 0 0;
  106. }
  107. .emoji--love .emoji__heart:before {
  108.   -webkit-transform: translate(20px) rotate(-45deg);
  109.           transform: translate(20px) rotate(-45deg);
  110.   -webkit-transform-origin: 0 100%;
  111.           transform-origin: 0 100%;
  112. }
  113. .emoji--love .emoji__heart:after {
  114.   -webkit-transform: translate(-20px) rotate(45deg);
  115.           transform: translate(-20px) rotate(45deg);
  116.   -webkit-transform-origin: 100% 100%;
  117.           transform-origin: 100% 100%;
  118. }
  119.  
  120. .emoji--haha:after {
  121.   content: '';
  122. }
  123. .emoji--haha .emoji__face {
  124.   -webkit-animation: haha-face 2s linear infinite;
  125.           animation: haha-face 2s linear infinite;
  126. }
  127. .emoji--haha .emoji__eyes {
  128.   width: 26px;
  129.   height: 6px;
  130.   border-radius: 2px;
  131.   left: calc(50% - 13px);
  132.   top: 35px;
  133.   -webkit-transform: rotate(20deg);
  134.           transform: rotate(20deg);
  135.   background: transparent;
  136.   box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000;
  137. }
  138. .emoji--haha .emoji__eyes:after {
  139.   left:;
  140.   top:;
  141.   width: 26px;
  142.   height: 6px;
  143.   border-radius: 2px;
  144.   -webkit-transform: rotate(-40deg);
  145.           transform: rotate(-40deg);
  146.   background: transparent;
  147.   box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000;
  148. }
  149. .emoji--haha .emoji__mouth {
  150.   width: 80px;
  151.   height: 40px;
  152.   left: calc(50% - 40px);
  153.   top: 50%;
  154.   background: #000000;
  155.   border-radius: 0 0 40px 40px;
  156.   overflow: hidden;
  157.   z-index:;
  158.   -webkit-animation: haha-mouth 2s linear infinite;
  159.           animation: haha-mouth 2s linear infinite;
  160. }
  161. .emoji--haha .emoji__tongue {
  162.   width: 70px;
  163.   height: 30px;
  164.   background: #F55064;
  165.   left: calc(50% - 35px);
  166.   bottom: -10px;
  167.   border-radius: 50%;
  168. }
  169.  
  170. .emoji--yay:after {
  171.   content: '';
  172.   -webkit-animation: yay-reverse 1s linear infinite;
  173.           animation: yay-reverse 1s linear infinite;
  174. }
  175. .emoji--yay .emoji__face {
  176.   -webkit-animation: yay 1s linear infinite alternate;
  177.           animation: yay 1s linear infinite alternate;
  178. }
  179. .emoji--yay .emoji__eyebrows {
  180.   left: calc(50% - 3px);
  181.   top: 30px;
  182.   height: 6px;
  183.   width: 6px;
  184.   border-radius: 50%;
  185.   background: transparent;
  186.   box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000;
  187. }
  188. .emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after {
  189.   width: 36px;
  190.   height: 18px;
  191.   border-radius: 60px 60px 0 0;
  192.   background: transparent;
  193.   border: 6px solid black;
  194.   box-sizing: border-box;
  195.   border-bottom:;
  196.   bottom: 3px;
  197.   left: calc(50% - 18px);
  198. }
  199. .emoji--yay .emoji__eyebrows:before {
  200.   margin-left: -21px;
  201. }
  202. .emoji--yay .emoji__eyebrows:after {
  203.   margin-left: 21px;
  204. }
  205. .emoji--yay .emoji__mouth {
  206.   top: 60px;
  207.   background: transparent;
  208.   left: 50%;
  209. }
  210. .emoji--yay .emoji__mouth:after {
  211.   width: 80px;
  212.   height: 80px;
  213.   left: calc(50% - 40px);
  214.   top: -75px;
  215.   border-radius: 50%;
  216.   background: transparent;
  217.   border: 6px solid #000000;
  218.   box-sizing: border-box;
  219.   border-top-color: transparent;
  220.   border-left-color: transparent;
  221.   border-right-color: transparent;
  222.   z-index:;
  223. }
  224. .emoji--yay .emoji__mouth:before {
  225.   width: 6px;
  226.   height: 6px;
  227.   background: transparent;
  228.   border-radius: 50%;
  229.   bottom: 5px;
  230.   left: calc(50% - 3px);
  231.   box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C;
  232. }
  233.  
  234. .emoji--wow:after {
  235.   content: '';
  236. }
  237. .emoji--wow .emoji__face {
  238.   -webkit-animation: wow-face 3s linear infinite;
  239.           animation: wow-face 3s linear infinite;
  240. }
  241. .emoji--wow .emoji__eyebrows {
  242.   left: calc(50% - 3px);
  243.   height: 6px;
  244.   width: 6px;
  245.   border-radius: 50%;
  246.   background: transparent;
  247.   box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000;
  248.   -webkit-animation: wow-brow 3s linear infinite;
  249.           animation: wow-brow 3s linear infinite;
  250. }
  251. .emoji--wow .emoji__eyebrows:before, .emoji--wow .emoji__eyebrows:after {
  252.   width: 24px;
  253.   height: 20px;
  254.   border: 6px solid #000000;
  255.   box-sizing: border-box;
  256.   border-radius: 50%;
  257.   border-bottom-color: transparent;
  258.   border-left-color: transparent;
  259.   border-right-color: transparent;
  260.   top: -3px;
  261.   left: calc(50% - 12px);
  262. }
  263. .emoji--wow .emoji__eyebrows:before {
  264.   margin-left: -25px;
  265. }
  266. .emoji--wow .emoji__eyebrows:after {
  267.   margin-left: 25px;
  268. }
  269. .emoji--wow .emoji__eyes {
  270.   width: 16px;
  271.   height: 24px;
  272.   left: calc(50% - 8px);
  273.   top: 35px;
  274.   border-radius: 50%;
  275.   background: transparent;
  276.   box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
  277. }
  278. .emoji--wow .emoji__mouth {
  279.   width: 30px;
  280.   height: 45px;
  281.   left: calc(50% - 15px);
  282.   top: 50%;
  283.   border-radius: 50%;
  284.   background: #000000;
  285.   -webkit-animation: wow-mouth 3s linear infinite;
  286.           animation: wow-mouth 3s linear infinite;
  287. }
  288.  
  289. .emoji--sad:after {
  290.   content: '';
  291. }
  292. .emoji--sad .emoji__face {
  293.   -webkit-animation: sad-face 2s ease-in infinite;
  294.           animation: sad-face 2s ease-in infinite;
  295. }
  296. .emoji--sad .emoji__eyebrows {
  297.   left: calc(50% - 3px);
  298.   top: 35px;
  299.   height: 6px;
  300.   width: 6px;
  301.   border-radius: 50%;
  302.   background: transparent;
  303.   box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000, 40px 9px 0 0 #000000;
  304. }
  305. .emoji--sad .emoji__eyebrows:before, .emoji--sad .emoji__eyebrows:after {
  306.   width: 30px;
  307.   height: 20px;
  308.   border: 6px solid #000000;
  309.   box-sizing: border-box;
  310.   border-radius: 50%;
  311.   border-bottom-color: transparent;
  312.   border-left-color: transparent;
  313.   border-right-color: transparent;
  314.   top: 2px;
  315.   left: calc(50% - 15px);
  316. }
  317. .emoji--sad .emoji__eyebrows:before {
  318.   margin-left: -30px;
  319.   -webkit-transform: rotate(-30deg);
  320.           transform: rotate(-30deg);
  321. }
  322. .emoji--sad .emoji__eyebrows:after {
  323.   margin-left: 30px;
  324.   -webkit-transform: rotate(30deg);
  325.           transform: rotate(30deg);
  326. }
  327. .emoji--sad .emoji__eyes {
  328.   width: 14px;
  329.   height: 16px;
  330.   left: calc(50% - 7px);
  331.   top: 50px;
  332.   border-radius: 50%;
  333.   background: transparent;
  334.   box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
  335. }
  336. .emoji--sad .emoji__eyes:after {
  337.   background: #548DFF;
  338.   width: 12px;
  339.   height: 12px;
  340.   margin-left: 6px;
  341.   border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
  342.   -webkit-transform-origin: 0% 0%;
  343.           transform-origin: 0% 0%;
  344.   -webkit-animation: tear-drop 2s ease-in infinite;
  345.           animation: tear-drop 2s ease-in infinite;
  346. }
  347. .emoji--sad .emoji__mouth {
  348.   width: 60px;
  349.   height: 80px;
  350.   left: calc(50% - 30px);
  351.   top: 80px;
  352.   box-sizing: border-box;
  353.   border: 6px solid #000000;
  354.   border-radius: 50%;
  355.   border-bottom-color: transparent;
  356.   border-left-color: transparent;
  357.   border-right-color: transparent;
  358.   background: transparent;
  359.   -webkit-animation: sad-mouth 2s ease-in infinite;
  360.           animation: sad-mouth 2s ease-in infinite;
  361. }
  362. .emoji--sad .emoji__mouth:after {
  363.   width: 6px;
  364.   height: 6px;
  365.   background: transparent;
  366.   border-radius: 50%;
  367.   top: 4px;
  368.   left: calc(50% - 3px);
  369.   box-shadow: -18px 0 0 0 #000000, 18px 0 0 0 #000000;
  370. }
  371.  
  372. .emoji--angry {
  373.   background: -webkit-linear-gradient(#D5234C -10%, #FFDA6A);
  374.   background: linear-gradient(#D5234C -10%, #FFDA6A);
  375.   background-size: 100%;
  376.   -webkit-animation: angry-color 2s ease-in infinite;
  377.           animation: angry-color 2s ease-in infinite;
  378. }
  379. .emoji--angry:after {
  380.   content: '';
  381. }
  382. .emoji--angry .emoji__face {
  383.   -webkit-animation: angry-face 2s ease-in infinite;
  384.           animation: angry-face 2s ease-in infinite;
  385. }
  386. .emoji--angry .emoji__eyebrows {
  387.   left: calc(50% - 3px);
  388.   top: 55px;
  389.   height: 6px;
  390.   width: 6px;
  391.   border-radius: 50%;
  392.   background: transparent;
  393.   box-shadow: -44px 5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0 #000000;
  394. }
  395. .emoji--angry .emoji__eyebrows:before, .emoji--angry .emoji__eyebrows:after {
  396.   width: 50px;
  397.   height: 20px;
  398.   border: 6px solid #000000;
  399.   box-sizing: border-box;
  400.   border-radius: 50%;
  401.   border-top-color: transparent;
  402.   border-left-color: transparent;
  403.   border-right-color: transparent;
  404.   top:;
  405.   left: calc(50% - 25px);
  406. }
  407. .emoji--angry .emoji__eyebrows:before {
  408.   margin-left: -25px;
  409.   -webkit-transform: rotate(15deg);
  410.           transform: rotate(15deg);
  411. }
  412. .emoji--angry .emoji__eyebrows:after {
  413.   margin-left: 25px;
  414.   -webkit-transform: rotate(-15deg);
  415.           transform: rotate(-15deg);
  416. }
  417. .emoji--angry .emoji__eyes {
  418.   width: 12px;
  419.   height: 12px;
  420.   left: calc(50% - 6px);
  421.   top: 70px;
  422.   border-radius: 50%;
  423.   background: transparent;
  424.   box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
  425. }
  426. .emoji--angry .emoji__mouth {
  427.   width: 36px;
  428.   height: 18px;
  429.   left: calc(50% - 18px);
  430.   bottom: 15px;
  431.   background: #000000;
  432.   border-radius: 50%;
  433.   -webkit-animation: angry-mouth 2s ease-in infinite;
  434.           animation: angry-mouth 2s ease-in infinite;
  435. }
  436.  
  437. @-webkit-keyframes heart-beat {
  438.   25% {
  439.     -webkit-transform: scale(1.1);
  440.             transform: scale(1.1);
  441.   }
  442.   75% {
  443.     -webkit-transform: scale(0.6);
  444.             transform: scale(0.6);
  445.   }
  446. }
  447.  
  448. @keyframes heart-beat {
  449.   25% {
  450.     -webkit-transform: scale(1.1);
  451.             transform: scale(1.1);
  452.   }
  453.   75% {
  454.     -webkit-transform: scale(0.6);
  455.             transform: scale(0.6);
  456.   }
  457. }
  458. @-webkit-keyframes haha-face {
  459.   10% {
  460.     -webkit-transform: translateY(25px);
  461.             transform: translateY(25px);
  462.   }
  463.   20% {
  464.     -webkit-transform: translateY(15px);
  465.             transform: translateY(15px);
  466.   }
  467.   30% {
  468.     -webkit-transform: translateY(25px);
  469.             transform: translateY(25px);
  470.   }
  471.   40% {
  472.     -webkit-transform: translateY(15px);
  473.             transform: translateY(15px);
  474.   }
  475.   50% {
  476.     -webkit-transform: translateY(25px);
  477.             transform: translateY(25px);
  478.   }
  479.   60% {
  480.     -webkit-transform: translateY(0);
  481.             transform: translateY(0);
  482.   }
  483.   70% {
  484.     -webkit-transform: translateY(-10px);
  485.             transform: translateY(-10px);
  486.   }
  487.   80% {
  488.     -webkit-transform: translateY(0);
  489.             transform: translateY(0);
  490.   }
  491.   90% {
  492.     -webkit-transform: translateY(-10px);
  493.             transform: translateY(-10px);
  494.   }
  495. }
  496. @keyframes haha-face {
  497.   10% {
  498.     -webkit-transform: translateY(25px);
  499.             transform: translateY(25px);
  500.   }
  501.   20% {
  502.     -webkit-transform: translateY(15px);
  503.             transform: translateY(15px);
  504.   }
  505.   30% {
  506.     -webkit-transform: translateY(25px);
  507.             transform: translateY(25px);
  508.   }
  509.   40% {
  510.     -webkit-transform: translateY(15px);
  511.             transform: translateY(15px);
  512.   }
  513.   50% {
  514.     -webkit-transform: translateY(25px);
  515.             transform: translateY(25px);
  516.   }
  517.   60% {
  518.     -webkit-transform: translateY(0);
  519.             transform: translateY(0);
  520.   }
  521.   70% {
  522.     -webkit-transform: translateY(-10px);
  523.             transform: translateY(-10px);
  524.   }
  525.   80% {
  526.     -webkit-transform: translateY(0);
  527.             transform: translateY(0);
  528.   }
  529.   90% {
  530.     -webkit-transform: translateY(-10px);
  531.             transform: translateY(-10px);
  532.   }
  533. }
  534. @-webkit-keyframes haha-mouth {
  535.   10% {
  536.     -webkit-transform: scale(0.6);
  537.             transform: scale(0.6);
  538.     top: 45%;
  539.   }
  540.   20% {
  541.     -webkit-transform: scale(0.8);
  542.             transform: scale(0.8);
  543.     top: 45%;
  544.   }
  545.   30% {
  546.     -webkit-transform: scale(0.6);
  547.             transform: scale(0.6);
  548.     top: 45%;
  549.   }
  550.   40% {
  551.     -webkit-transform: scale(0.8);
  552.             transform: scale(0.8);
  553.     top: 45%;
  554.   }
  555.   50% {
  556.     -webkit-transform: scale(0.6);
  557.             transform: scale(0.6);
  558.     top: 45%;
  559.   }
  560.   60% {
  561.     -webkit-transform: scale(1);
  562.             transform: scale(1);
  563.     top: 50%;
  564.   }
  565.   70% {
  566.     -webkit-transform: scale(1.2);
  567.             transform: scale(1.2);
  568.     top: 50%;
  569.   }
  570.   80% {
  571.     -webkit-transform: scale(1);
  572.             transform: scale(1);
  573.     top: 50%;
  574.   }
  575.   90% {
  576.     -webkit-transform: scale(1.1);
  577.             transform: scale(1.1);
  578.     top: 50%;
  579.   }
  580. }
  581. @keyframes haha-mouth {
  582.   10% {
  583.     -webkit-transform: scale(0.6);
  584.             transform: scale(0.6);
  585.     top: 45%;
  586.   }
  587.   20% {
  588.     -webkit-transform: scale(0.8);
  589.             transform: scale(0.8);
  590.     top: 45%;
  591.   }
  592.   30% {
  593.     -webkit-transform: scale(0.6);
  594.             transform: scale(0.6);
  595.     top: 45%;
  596.   }
  597.   40% {
  598.     -webkit-transform: scale(0.8);
  599.             transform: scale(0.8);
  600.     top: 45%;
  601.   }
  602.   50% {
  603.     -webkit-transform: scale(0.6);
  604.             transform: scale(0.6);
  605.     top: 45%;
  606.   }
  607.   60% {
  608.     -webkit-transform: scale(1);
  609.             transform: scale(1);
  610.     top: 50%;
  611.   }
  612.   70% {
  613.     -webkit-transform: scale(1.2);
  614.             transform: scale(1.2);
  615.     top: 50%;
  616.   }
  617.   80% {
  618.     -webkit-transform: scale(1);
  619.             transform: scale(1);
  620.     top: 50%;
  621.   }
  622.   90% {
  623.     -webkit-transform: scale(1.1);
  624.             transform: scale(1.1);
  625.     top: 50%;
  626.   }
  627. }
  628. @-webkit-keyframes yay {
  629.   25% {
  630.     -webkit-transform: rotate(-15deg);
  631.             transform: rotate(-15deg);
  632.   }
  633.   75% {
  634.     -webkit-transform: rotate(15deg);
  635.             transform: rotate(15deg);
  636.   }
  637. }
  638. @keyframes yay {
  639.   25% {
  640.     -webkit-transform: rotate(-15deg);
  641.             transform: rotate(-15deg);
  642.   }
  643.   75% {
  644.     -webkit-transform: rotate(15deg);
  645.             transform: rotate(15deg);
  646.   }
  647. }
  648. @-webkit-keyframes wow-face {
  649.   15%, 25% {
  650.     -webkit-transform: rotate(20deg) translateX(-25px);
  651.             transform: rotate(20deg) translateX(-25px);
  652.   }
  653.   45%, 65% {
  654.     -webkit-transform: rotate(-20deg) translateX(25px);
  655.             transform: rotate(-20deg) translateX(25px);
  656.   }
  657.   75%, 100% {
  658.     -webkit-transform: rotate(0deg) translateX(0);
  659.             transform: rotate(0deg) translateX(0);
  660.   }
  661. }
  662. @keyframes wow-face {
  663.   15%, 25% {
  664.     -webkit-transform: rotate(20deg) translateX(-25px);
  665.             transform: rotate(20deg) translateX(-25px);
  666.   }
  667.   45%, 65% {
  668.     -webkit-transform: rotate(-20deg) translateX(25px);
  669.             transform: rotate(-20deg) translateX(25px);
  670.   }
  671.   75%, 100% {
  672.     -webkit-transform: rotate(0deg) translateX(0);
  673.             transform: rotate(0deg) translateX(0);
  674.   }
  675. }
  676. @-webkit-keyframes wow-brow {
  677.   15%, 65% {
  678.     top: 25px;
  679.   }
  680.   75%, 100%, 0% {
  681.     top: 15px;
  682.   }
  683. }
  684. @keyframes wow-brow {
  685.   15%, 65% {
  686.     top: 25px;
  687.   }
  688.   75%, 100%, 0% {
  689.     top: 15px;
  690.   }
  691. }
  692. @-webkit-keyframes wow-mouth {
  693.   10%, 30% {
  694.     width: 20px;
  695.     height: 20px;
  696.     left: calc(50% - 10px);
  697.   }
  698.   50%, 70% {
  699.     width: 30px;
  700.     height: 40px;
  701.     left: calc(50% - 15px);
  702.   }
  703.   75%, 100% {
  704.     height: 50px;
  705.   }
  706. }
  707. @keyframes wow-mouth {
  708.   10%, 30% {
  709.     width: 20px;
  710.     height: 20px;
  711.     left: calc(50% - 10px);
  712.   }
  713.   50%, 70% {
  714.     width: 30px;
  715.     height: 40px;
  716.     left: calc(50% - 15px);
  717.   }
  718.   75%, 100% {
  719.     height: 50px;
  720.   }
  721. }
  722. @-webkit-keyframes sad-face {
  723.   25%, 35% {
  724.     top: -15px;
  725.   }
  726.   55%, 95% {
  727.     top: 10px;
  728.   }
  729.   100%, 0% {
  730.     top:;
  731.   }
  732. }
  733. @keyframes sad-face {
  734.   25%, 35% {
  735.     top: -15px;
  736.   }
  737.   55%, 95% {
  738.     top: 10px;
  739.   }
  740.   100%, 0% {
  741.     top:;
  742.   }
  743. }
  744. @-webkit-keyframes sad-mouth {
  745.   25%, 35% {
  746.     -webkit-transform: scale(0.85);
  747.             transform: scale(0.85);
  748.     top: 70px;
  749.   }
  750.   55%, 100%, 0% {
  751.     -webkit-transform: scale(1);
  752.             transform: scale(1);
  753.     top: 80px;
  754.   }
  755. }
  756. @keyframes sad-mouth {
  757.   25%, 35% {
  758.     -webkit-transform: scale(0.85);
  759.             transform: scale(0.85);
  760.     top: 70px;
  761.   }
  762.   55%, 100%, 0% {
  763.     -webkit-transform: scale(1);
  764.             transform: scale(1);
  765.     top: 80px;
  766.   }
  767. }
  768. @-webkit-keyframes tear-drop {
  769.   0%, 100% {
  770.     display: block;
  771.     left: 35px;
  772.     top: 15px;
  773.     -webkit-transform: rotate(45deg) scale(0);
  774.             transform: rotate(45deg) scale(0);
  775.   }
  776.   25% {
  777.     display: block;
  778.     left: 35px;
  779.     -webkit-transform: rotate(45deg) scale(2);
  780.             transform: rotate(45deg) scale(2);
  781.   }
  782.   49.9% {
  783.     display: block;
  784.     left: 35px;
  785.     top: 65px;
  786.     -webkit-transform: rotate(45deg) scale(0);
  787.             transform: rotate(45deg) scale(0);
  788.   }
  789.   50% {
  790.     display: block;
  791.     left: -35px;
  792.     top: 15px;
  793.     -webkit-transform: rotate(45deg) scale(0);
  794.             transform: rotate(45deg) scale(0);
  795.   }
  796.   75% {
  797.     display: block;
  798.     left: -35px;
  799.     -webkit-transform: rotate(45deg) scale(2);
  800.             transform: rotate(45deg) scale(2);
  801.   }
  802.   99.9% {
  803.     display: block;
  804.     left: -35px;
  805.     top: 65px;
  806.     -webkit-transform: rotate(45deg) scale(0);
  807.             transform: rotate(45deg) scale(0);
  808.   }
  809. }
  810. @keyframes tear-drop {
  811.   0%, 100% {
  812.     display: block;
  813.     left: 35px;
  814.     top: 15px;
  815.     -webkit-transform: rotate(45deg) scale(0);
  816.             transform: rotate(45deg) scale(0);
  817.   }
  818.   25% {
  819.     display: block;
  820.     left: 35px;
  821.     -webkit-transform: rotate(45deg) scale(2);
  822.             transform: rotate(45deg) scale(2);
  823.   }
  824.   49.9% {
  825.     display: block;
  826.     left: 35px;
  827.     top: 65px;
  828.     -webkit-transform: rotate(45deg) scale(0);
  829.             transform: rotate(45deg) scale(0);
  830.   }
  831.   50% {
  832.     display: block;
  833.     left: -35px;
  834.     top: 15px;
  835.     -webkit-transform: rotate(45deg) scale(0);
  836.             transform: rotate(45deg) scale(0);
  837.   }
  838.   75% {
  839.     display: block;
  840.     left: -35px;
  841.     -webkit-transform: rotate(45deg) scale(2);
  842.             transform: rotate(45deg) scale(2);
  843.   }
  844.   99.9% {
  845.     display: block;
  846.     left: -35px;
  847.     top: 65px;
  848.     -webkit-transform: rotate(45deg) scale(0);
  849.             transform: rotate(45deg) scale(0);
  850.   }
  851. }
  852. @-webkit-keyframes hands-up {
  853.   25% {
  854.     -webkit-transform: rotate(15deg);
  855.             transform: rotate(15deg);
  856.   }
  857.   50% {
  858.     -webkit-transform: rotate(-15deg) translateY(-10px);
  859.             transform: rotate(-15deg) translateY(-10px);
  860.   }
  861.   75%, 100% {
  862.     -webkit-transform: rotate(0deg);
  863.             transform: rotate(0deg);
  864.   }
  865. }
  866. @keyframes hands-up {
  867.   25% {
  868.     -webkit-transform: rotate(15deg);
  869.             transform: rotate(15deg);
  870.   }
  871.   50% {
  872.     -webkit-transform: rotate(-15deg) translateY(-10px);
  873.             transform: rotate(-15deg) translateY(-10px);
  874.   }
  875.   75%, 100% {
  876.     -webkit-transform: rotate(0deg);
  877.             transform: rotate(0deg);
  878.   }
  879. }
  880. @-webkit-keyframes thumbs-up {
  881.   25% {
  882.     -webkit-transform: rotate(20deg);
  883.             transform: rotate(20deg);
  884.   }
  885.   50%, 100% {
  886.     -webkit-transform: rotate(5deg);
  887.             transform: rotate(5deg);
  888.   }
  889. }
  890. @keyframes thumbs-up {
  891.   25% {
  892.     -webkit-transform: rotate(20deg);
  893.             transform: rotate(20deg);
  894.   }
  895.   50%, 100% {
  896.     -webkit-transform: rotate(5deg);
  897.             transform: rotate(5deg);
  898.   }
  899. }
  900. @-webkit-keyframes angry-color {
  901.   45%, 60% {
  902.     background-size: 250%;
  903.   }
  904.   85%, 100%, 0% {
  905.     background-size: 100%;
  906.   }
  907. }
  908. @keyframes angry-color {
  909.   45%, 60% {
  910.     background-size: 250%;
  911.   }
  912.   85%, 100%, 0% {
  913.     background-size: 100%;
  914.   }
  915. }
  916. @-webkit-keyframes angry-face {
  917.   35%, 60% {
  918.     -webkit-transform: translateX(0) translateY(10px) scale(0.9);
  919.             transform: translateX(0) translateY(10px) scale(0.9);
  920.   }
  921.   40% {
  922.     -webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
  923.             transform: translateX(-5px) translateY(10px) scale(0.9);
  924.   }
  925.   45% {
  926.     -webkit-transform: translateX(5px) translateY(10px) scale(0.9);
  927.             transform: translateX(5px) translateY(10px) scale(0.9);
  928.   }
  929.   50% {
  930.     -webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
  931.             transform: translateX(-5px) translateY(10px) scale(0.9);
  932.   }
  933.   55% {
  934.     -webkit-transform: translateX(5px) translateY(10px) scale(0.9);
  935.             transform: translateX(5px) translateY(10px) scale(0.9);
  936.   }
  937. }
  938. @keyframes angry-face {
  939.   35%, 60% {
  940.     -webkit-transform: translateX(0) translateY(10px) scale(0.9);
  941.             transform: translateX(0) translateY(10px) scale(0.9);
  942.   }
  943.   40% {
  944.     -webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
  945.             transform: translateX(-5px) translateY(10px) scale(0.9);
  946.   }
  947.   45% {
  948.     -webkit-transform: translateX(5px) translateY(10px) scale(0.9);
  949.             transform: translateX(5px) translateY(10px) scale(0.9);
  950.   }
  951.   50% {
  952.     -webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
  953.             transform: translateX(-5px) translateY(10px) scale(0.9);
  954.   }
  955.   55% {
  956.     -webkit-transform: translateX(5px) translateY(10px) scale(0.9);
  957.             transform: translateX(5px) translateY(10px) scale(0.9);
  958.   }
  959. }
  960. @-webkit-keyframes angry-mouth {
  961.   25%, 50% {
  962.     height: 6px;
  963.     bottom: 25px;
  964.   }
  965. }
  966. @keyframes angry-mouth {
  967.   25%, 50% {
  968.     height: 6px;
  969.     bottom: 25px;
  970.   }
  971. }

各位，写出个本地html来试试吧

随机推荐

  1. TCP札记

    协议对于通信就像算法对于计算一样.算法允许人们在不必知道特定的CPU指令集的情况下指定或理解具体的计算形式.同样地,通信协议允许人们不依赖特定厂家的网络硬件来指定或理解数据通信. 网络协议通常分不同层 ...

  2. 15套java架构师大型分布式综合项目实战、千万高并发-视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩 展 ...

  3. phpexcl导出数据

    <?php public function export_do_one(){ //excel 导出数据 import('ORG.Util.Page_new');// 导入分页类 ,修改了原来的P ...

  4. 利用 Traceview 精准定位启动时间测试的异常方法 (工具开源)

    机智的防爬虫标识原创博客地址:http://www.cnblogs.com/alexkn/p/7095855.html博客求关注: http://www.cnblogs.com/alexkn 1.启动 ...

  5. Hbase FilterList使用总结

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/7098138.html 转载请注明出处 我们知道Hbase的Scan经常需要用到filter来过滤表中的数 ...

  6. laravel如何向视图传递变量的方法

    第一种: public function about(){ $name = "cai" return view("sites.about")->with( ...

  7. Java 获取字符串Hash值

    Java 生成字符串的Hash值: /** * A hashing method that changes a string (like a URL) into a hash suitable for ...

  8. c++有关构造函数和析构函数中调用虚函数问题

    今天看了一道迅雷的笔试题目,然后引起一段思考,题目如下: 下列关于虚函数的说法正确的是()A.在构造函数中调用类自己的虚函数,虚函数的动态绑定机制还会生效.B.在析构函数中调用类自己的虚函数,虚函数的 ...

  9. 入门Android开发

    一个工作1年多一点的前端狗,由于公司需要,开始接触Android,也是第一次写博客,以后学到的技术每天都会写篇博客,让我们一起进步. Android 系统开发应用程序,为我们提供了哪些东西. 一.四大 ...

  10. peoplesoft function PSTREENODE 通过 deptid 获得部门树 一级部门 名称

    create or replace function ht_gettopdeptNAME(deptid in varchar) return varchar2 is r ); c int; m ); ...