Question

我正在制作一个CSS3动画，其中我想要一个气泡，就像它从真正的气泡管道中吹出一样。任何人都可以指导如何做到这一点吗？

像上图中出现的这种下降一样，气泡应该看起来像真正的气泡。这是我到目前为止所做的，但看起来并不好！好像手机正在走出广场。有没有什么方法可以让它看起来像是泡泡出来的？

#Capa_2{
  position: absolute;
  overflow: visible;
  top: 100px;
}
#Capa_1{
  position: absolute;
  top: 60px;
  left: 68px;
  animation: vibrate 0.1s 4s 3;
}
#chat {
  opacity: 0;
  animation: grow 3s 2s ease-in forwards; 
}
@keyframes grow {
  0% {
    /*transform: scale(2,2);*/
  }
  40% {opacity: 1;
    transform: scale(2.5,1.6) translate(300px,-350px);
  }
  70% {opacity: 1;
    transform: scale(2.4,1.5) translate(300px,-280px);
    margin-left: -2px;
    margin-top: 2px;  
  }
  100% {opacity: 1;
    transform: scale(2,2) translate(300px,-350px);
    margin-left: 0px;
    margin-top: 0px;  
  }
}
#phone {
  opacity: 0;
  animation: ring 2.5s 4.5s forwards; 
}
@keyframes ring {
  0% {
    opacity: 1;
    transform: translateX(-900px) rotate(0deg);
  }
  100% {
    transform: translateX(2px) rotate(360deg);
    opacity: 1;
  }
}
#phone {
  opacity: 0;
  animation: ring 2.5s 2s forwards; 
}
@keyframes vibrate {
  0%   {margin-left: 0px;}
  25%  {margin-left: -3px;}
  50%  {margin-left: 0px;}
  75%  {margin-left: 3px;}
  100% {margin-left: 0px;}
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head> 
    <link href="button.css" rel="stylesheet" media="all">
  </head>
  <body>
    <div>

      <svg xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px"    y="0px" width="32px" height="32px" viewBox="0 0 435.244 435.244" style="enable-background:new 0 0 435.244 435.244;" xml:space="preserve">
        <g>
          <g>
            <path id="chat" d="M75.146,425.343v-96.354C27.281,294.43,0,244.745,0,191.603C0,91.414,97.624,9.901,217.622,9.901    s217.622,81.513,217.622,181.701c0,100.186-97.624,181.701-217.622,181.701c-14.218,0-28.533-1.189-42.631-3.539L75.146,425.343z     M217.622,39.177c-103.854,0-188.346,68.379-188.346,152.425c0,45.561,25.014,88.418,68.636,117.568l6.504,4.346v62.022    l65.497-36.452l5.2,0.973c14.021,2.63,28.321,3.968,42.508,3.968c103.856,0,188.346-68.376,188.346-152.425    C405.968,107.556,321.479,39.177,217.622,39.177z" fill="#000000"/>
          </g>
        </g>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 760.025 760.025" style="enable-background:new 0 0 460.025 460.025;" xml:space="preserve" width="62px" height="62px">
        <path id="phone" d="M354.363,271.978c-11.661-22.385-28.972-40.292-51.43-53.211c-8.664-5.009-16.844-7.445-25.008-7.445  c-3.176,0-6.362,0.383-9.489,1.134c-10.368,2.513-20.326,7.363-30.442,14.831c-3.194,2.357-7.101,3.551-11.614,3.551  c-5.494,0-11.444-1.886-15.518-4.921c-29.574-22.047-54.67-47.141-76.712-76.711c-4.334-5.82-7.769-18.471-1.376-27.136  c7.47-10.118,12.322-20.077,14.837-30.461c2.694-11.19,0.629-22.467-6.3-34.455C128.376,34.669,110.468,17.359,88.089,5.7  C80.837,1.92,73.416,0,66.033,0C53.686,0,42.13,5.363,32.62,15.499c-8.742,9.303-16.471,19.154-25.389,31.082  C-0.932,57.51-0.259,70.117,0.336,81.24l0.015,0.237c1.002,14.108,6.272,30.804,16.11,51.025  c16.643,34.227,40.282,66.727,72.261,99.354c6.569,6.708,32.767,32.907,39.479,39.476c32.634,31.989,65.134,55.626,99.355,72.267  c20.226,9.839,36.917,15.107,51.029,16.111l0.237,0.015c2.903,0.155,6.006,0.3,9.026,0.3c0.001,0,0.001,0,0.001,0  c7.451,0,17.097-0.818,25.631-7.198c11.931-8.916,21.784-16.646,31.074-25.378C360.843,312.168,364.508,291.429,354.363,271.978z" fill="#1F45FC"/>

      </svg>
    </div>
  </body>
</html>

Css3动画吹泡泡

0 个答案: