Нужна анимация анимированной колибри на css или js [закрыт]

#javascript #html #css3 #svg #анимация

        
             
                
                    
                        
                            Закрыт. Данный вопрос необходимо конкретизировать. Ответы
на него в данный момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он был сосредоточен только на одной проблеме, отредактировав его.
                        
                        Закрыт 1 год назад.
                                                                                
           
                
        
Нужна анимация летающей колибри на css или js.
    

Ответы

Ответ 1

Такая еще svg колибри:



#colibri {
  width: 300px;
  height: 300px;
  margin: auto;
  
  animation: c 5s ease-in-out infinite;
}

.fly {
  transition: all .5s ease-in-out;
  transform-origin: 45% 45%;
  animation: f 2s ease-in-out infinite;
}


.d {
  animation: d 2s ease-in-out infinite;
}

@keyframes f {
  0% { transform: rotate(20deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(25deg); }
}

@keyframes c {
  50% { transform: translateY(50px); }
}

@keyframes d {
  50% { transform: translateX(-55px); }
}



Ответ 2

Решение CSS

Работает во всех браузерах и даже в IE11 , но не адаптивно, зато очень красиво

Команды анимации вращения CSS стандартны, но очень раздуты из-за стремления поддерживать
все виды браузеров: 



animation:aleteo .3s alternate infinite;
-moz-animation:aleteo .3s alternate infinite; /* Firefox */
-webkit-animation:aleteo .3s alternate infinite; /*Safari y Chrome*/ 



@-webkit-keyframes aleteo /* Safari y Chrome */
{
0%   {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
25%  {transform: rotate(-430deg);
-webkit-transform: rotate(-430deg);
-ms-transform: rotate(-430deg);}
50%  {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
75%  {transform: rotate(-435deg);
-webkit-transform: rotate(-435deg);
-ms-transform: rotate(-435deg);}
100% {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
}




Ниже полный код анимации колибри  



body{
background-color: #333;
width: 100%;
}
.col{
  position:absolute;
  transform:scale(.7)
}
#cuadro{
	width: 800px;
	height:600px;
	position:relative;
	background-color:black;
	margin: 90px auto;
	overflow:hidden;
}
#circulo{
 width: 123px;
 height: 180px; 
 border-radius: 12px 271px 30px 182px; 
 -webkit-transform: rotate(-221deg); 
 -ms-transform: rotate(-221deg); 
 transform: rotate(-221deg);
position: absolute;
float:left;
top: 35px;
left: 458px;
background: rgb(0,86,237); /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,86,237,1)),
color-stop(55%,rgba(99,217,221,1)), color-stop(64%,rgba(112,234,224,1)), color-stop(100%,rgba(219,218,214,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,86,237,1) 0%,rgba(99,217,221,1) 55%,rgba(112,234,224,1)
64%,rgba(219,218,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, rgba(0,86,237,1) 0%,rgba(99,217,221,1) 55%,rgba(112,234,224,1)
64%,rgba(219,218,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0056ed', endColorstr='#dbdad6',GradientType=0
); /* IE6-8 */
 }  
#cuerpo{
border-radius: 33px 412px 30px 368px; 
transform: rotate(-555deg);
-webkit-transform: rotate(-555deg);
-ms-transform: rotate(-555deg);
background: rgb(89,106,114); /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(89,106,114,1)),
color-stop(100%,rgba(231,126,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(89,106,114,1) 0%,rgba(231,126,234,1)
100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, rgba(89,106,114,1) 0%,rgba(231,126,234,1)
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#e77eea',GradientType=0
); /* IE6-8 */
height: 275px;
position: absolute;
float:left;
top: 112px;
width: 192px;
left: 503px;
}
#alas{
border-radius: 0px 412px 0px 412px; 
transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,86,237,0.5)),
color-stop(50%,rgba(22,217,252,0.75)), color-stop(100%,rgba(22,217,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,86,237,0.5) 0%,rgba(22,217,252,0.75)
50%,rgba(22,217,252,1) 100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, rgba(0,86,237,0.5) 0%,rgba(22,217,252,0.75)
50%,rgba(22,217,252,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,86,237,0.5) 0%,rgba(22,217,252,0.75)
50%,rgba(22,217,252,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800056ed', endColorstr='#16d9fc',GradientType=0
); /* IE6-8 */
height: 280px;
position: absolute;
float:left;
top: 70px;
width:192px;
left:685px;
animation:aleteo .3s alternate infinite;
-moz-animation:aleteo .3s alternate infinite; /* Firefox */
-webkit-animation:aleteo .3s alternate infinite; /*Safari y Chrome*/ 
}
#alas::before{
content:"";
border-radius: 0px 412px 0px 412px; 
transform: rotate(-201deg);
-webkit-transform: rotate(-201deg);
-ms-transform: rotate(-201deg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,96,179,0.5)),
color-stop(6%,rgba(173,18,131,0.5)), color-stop(9%,rgba(79,47,78,0.5)), color-stop(15%,rgba(173,18,131,0.5)),
color-stop(18%,rgba(79,47,78,0.5)), color-stop(24%,rgba(173,18,131,0.5)), color-stop(27%,rgba(79,47,78,0.5)),
color-stop(32%,rgba(173,18,131,0.5)), color-stop(35%,rgba(79,47,78,0.5)), color-stop(41%,rgba(173,18,131,0.5)),
color-stop(44%,rgba(79,47,78,0.5)), color-stop(49%,rgba(173,18,131,0.5)), color-stop(52%,rgba(79,47,78,0.5)),
color-stop(57%,rgba(173,18,131,0.5)), color-stop(60%,rgba(79,47,78,0.5)), color-stop(65%,rgba(173,18,131,0.5)),
color-stop(68%,rgba(79,47,78,0.5)), color-stop(73%,rgba(173,18,131,0.5)), color-stop(76%,rgba(79,47,78,0.5)),
color-stop(82%,rgba(173,18,131,0.5)), color-stop(85%,rgba(79,47,78,0.5)), color-stop(90%,rgba(173,18,131,0.5)),
color-stop(93%,rgba(79,47,78,0.5)), color-stop(100%,rgba(222,71,172,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,96,179,0.5) 0%,rgba(173,18,131,0.5)
6%,rgba(79,47,78,0.5) 9%,rgba(173,18,131,0.5) 15%,rgba(79,47,78,0.5) 18%,rgba(173,18,131,0.5)
24%,rgba(79,47,78,0.5) 27%,rgba(173,18,131,0.5) 32%,rgba(79,47,78,0.5) 35%,rgba(173,18,131,0.5)
41%,rgba(79,47,78,0.5) 44%,rgba(173,18,131,0.5) 49%,rgba(79,47,78,0.5) 52%,rgba(173,18,131,0.5)
57%,rgba(79,47,78,0.5) 60%,rgba(173,18,131,0.5) 65%,rgba(79,47,78,0.5) 68%,rgba(173,18,131,0.5)
73%,rgba(79,47,78,0.5) 76%,rgba(173,18,131,0.5) 82%,rgba(79,47,78,0.5) 85%,rgba(173,18,131,0.5)
90%,rgba(79,47,78,0.5) 93%,rgba(222,71,172,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, rgba(203,96,179,0.5) 0%,rgba(173,18,131,0.5)
6%,rgba(79,47,78,0.5) 9%,rgba(173,18,131,0.5) 15%,rgba(79,47,78,0.5) 18%,rgba(173,18,131,0.5)
24%,rgba(79,47,78,0.5) 27%,rgba(173,18,131,0.5) 32%,rgba(79,47,78,0.5) 35%,rgba(173,18,131,0.5)
41%,rgba(79,47,78,0.5) 44%,rgba(173,18,131,0.5) 49%,rgba(79,47,78,0.5) 52%,rgba(173,18,131,0.5)
57%,rgba(79,47,78,0.5) 60%,rgba(173,18,131,0.5) 65%,rgba(79,47,78,0.5) 68%,rgba(173,18,131,0.5)
73%,rgba(79,47,78,0.5) 76%,rgba(173,18,131,0.5) 82%,rgba(79,47,78,0.5) 85%,rgba(173,18,131,0.5)
90%,rgba(79,47,78,0.5) 93%,rgba(222,71,172,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80cb60b3', endColorstr='#80de47ac',GradientType=0
); /* IE6-8 */
height: 291px;
position: absolute;
float:left;
top: -42px;
width:185px;
left: 44px;
}
#alas::after{
content:"";
border-radius: 412px 0px 412px 0px; 
transform: rotate(-260deg);
-webkit-transform: rotate(-260deg);
-ms-transform: rotate(-260deg);
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(45deg, rgba(7,137,244,0.5) 0%, rgba(74,114,168,0.5)
5%, rgba(2,147,244,0.5) 8%, rgba(74,114,168,0.5) 13%, rgba(2,147,244,0.5) 16%, rgba(74,114,168,0.5)
22%, rgba(2,147,244,0.5) 25%, rgba(74,114,168,0.5) 30%, rgba(2,147,244,0.5) 33%, rgba(74,114,168,0.5)
38%, rgba(2,147,244,0.5) 41%, rgba(74,114,168,0.5) 47%, rgba(2,147,244,0.5) 50%, rgba(74,114,168,0.5)
56%, rgba(2,147,244,0.5) 59%, rgba(74,114,168,0.5) 65%, rgba(2,147,244,0.5) 68%, rgba(74,114,168,0.5)
74%, rgba(2,147,244,0.5) 77%, rgba(74,114,168,0.5) 83%, rgba(2,147,244,0.5) 86%, rgba(74,114,168,0.5)
92%, rgba(2,147,244,0.5) 95%, rgba(2,147,244,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(7,137,244,0.5)),
color-stop(5%,rgba(74,114,168,0.5)), color-stop(8%,rgba(2,147,244,0.5)), color-stop(13%,rgba(74,114,168,0.5)),
color-stop(16%,rgba(2,147,244,0.5)), color-stop(22%,rgba(74,114,168,0.5)), color-stop(25%,rgba(2,147,244,0.5)),
color-stop(30%,rgba(74,114,168,0.5)), color-stop(33%,rgba(2,147,244,0.5)), color-stop(38%,rgba(74,114,168,0.5)),
color-stop(41%,rgba(2,147,244,0.5)), color-stop(47%,rgba(74,114,168,0.5)), color-stop(50%,rgba(2,147,244,0.5)),
color-stop(56%,rgba(74,114,168,0.5)), color-stop(59%,rgba(2,147,244,0.5)), color-stop(65%,rgba(74,114,168,0.5)),
color-stop(68%,rgba(2,147,244,0.5)), color-stop(74%,rgba(74,114,168,0.5)), color-stop(77%,rgba(2,147,244,0.5)),
color-stop(83%,rgba(74,114,168,0.5)), color-stop(86%,rgba(2,147,244,0.5)), color-stop(92%,rgba(74,114,168,0.5)),
color-stop(95%,rgba(2,147,244,0.5)), color-stop(100%,rgba(2,147,244,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(7,137,244,0.5) 0%,rgba(74,114,168,0.5)
5%,rgba(2,147,244,0.5) 8%,rgba(74,114,168,0.5) 13%,rgba(2,147,244,0.5) 16%,rgba(74,114,168,0.5)
22%,rgba(2,147,244,0.5) 25%,rgba(74,114,168,0.5) 30%,rgba(2,147,244,0.5) 33%,rgba(74,114,168,0.5)
38%,rgba(2,147,244,0.5) 41%,rgba(74,114,168,0.5) 47%,rgba(2,147,244,0.5) 50%,rgba(74,114,168,0.5)
56%,rgba(2,147,244,0.5) 59%,rgba(74,114,168,0.5) 65%,rgba(2,147,244,0.5) 68%,rgba(74,114,168,0.5)
74%,rgba(2,147,244,0.5) 77%,rgba(74,114,168,0.5) 83%,rgba(2,147,244,0.5) 86%,rgba(74,114,168,0.5)
92%,rgba(2,147,244,0.5) 95%,rgba(2,147,244,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(45deg, rgba(7,137,244,0.5) 0%,rgba(74,114,168,0.5) 5%,rgba(2,147,244,0.5)
8%,rgba(74,114,168,0.5) 13%,rgba(2,147,244,0.5) 16%,rgba(74,114,168,0.5) 22%,rgba(2,147,244,0.5)
25%,rgba(74,114,168,0.5) 30%,rgba(2,147,244,0.5) 33%,rgba(74,114,168,0.5) 38%,rgba(2,147,244,0.5)
41%,rgba(74,114,168,0.5) 47%,rgba(2,147,244,0.5) 50%,rgba(74,114,168,0.5) 56%,rgba(2,147,244,0.5)
59%,rgba(74,114,168,0.5) 65%,rgba(2,147,244,0.5) 68%,rgba(74,114,168,0.5) 74%,rgba(2,147,244,0.5)
77%,rgba(74,114,168,0.5) 83%,rgba(2,147,244,0.5) 86%,rgba(74,114,168,0.5) 92%,rgba(2,147,244,0.5)
95%,rgba(2,147,244,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800789f4', endColorstr='#800293f4',GradientType=1
); /* IE6-8 fallback on horizontal gradient */
height: 190px;
position: absolute;
float:left;
top: 61px;
width:285px;
left: -77px;
}
@keyframes aleteo
{
0%   {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
25%  {transform: rotate(-430deg);
-webkit-transform: rotate(-430deg);
-ms-transform: rotate(-430deg);}
50%  {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
75%  {transform: rotate(-435deg);
-webkit-transform: rotate(-435deg);
-ms-transform: rotate(-435deg);}
100% {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
}

@-moz-keyframes aleteo /*Firefox*/
{
0%   {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
25%  {transform: rotate(-430deg);
-webkit-transform: rotate(-430deg);
-ms-transform: rotate(-430deg);}
50%  {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
75%  {transform: rotate(-435deg);
-webkit-transform: rotate(-435deg);
-ms-transform: rotate(-435deg);}
100% {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
}


@-webkit-keyframes aleteo /* Safari y Chrome */
{
0%   {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
25%  {transform: rotate(-430deg);
-webkit-transform: rotate(-430deg);
-ms-transform: rotate(-430deg);}
50%  {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
75%  {transform: rotate(-435deg);
-webkit-transform: rotate(-435deg);
-ms-transform: rotate(-435deg);}
100% {transform: rotate(-425deg);
-webkit-transform: rotate(-425deg);
-ms-transform: rotate(-425deg);}
}

.cabeza{
width: 112px;
 height: 112px; 
 background: rgba(255, 255, 255, 0);
  border:3px solid grey; 
 border-radius: 185px 150px 185px 50px; 
 -webkit-transform: rotate(-90deg); 
 -ms-transform: rotate(-90deg); 
 transform: rotate(-90deg);
 position:relative;
float:left;

top: 63px;
left:7px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,0.5)),
color-stop(100%,rgba(63,76,107,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,0.5) 0%,rgba(63,76,107,0.5)
100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, rgba(96,108,136,0.5) 0%,rgba(63,76,107,0.5)
100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(96,108,136,0.5) 0%,rgba(63,76,107,0.5)
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80606c88', endColorstr='#803f4c6b',GradientType=0
); /* IE6-8 */
}

.pico{
transform: rotate(268deg);
-webkit-transform: rotate(268deg);
-ms-transform: rotate(268deg);
position:absolute;
float:left;
width: -3px;
height: 221px;   
top: -14px;
left: 307px;
border: 2px solid #862108;


}
.pico3{
transform: rotate(271deg);
-webkit-transform: rotate(271deg);
-ms-transform: rotate(271deg);
position:absolute;
float:left;
height: 221px;   
top: -9px;
left: 307px;
border: 2px solid #862108;
}
.pico4{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
position:absolute;
float:left;
height: 80px; 
top: 56px;
left: 374px;
border: 4px solid #862108;
}
.pico5{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
position:absolute;
float:left;
height: 40px;     
top: 78px;
left: 310px;
border: 3px solid #862108;
}

.ojo{
border-radius: 30px 300px 30px 300px; 
transform: rotate(-121deg);
-webkit-transform: rotate(-121deg);
-ms-transform: rotate(-121deg);
-webkit-box-shadow: inset 1px 1px 3px 1px #333;
box-shadow: inset 1px 1px 3px 1px #333; 
background: rgb(89,106,114); /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(89,106,114,1)),
color-stop(50%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(89,106,114,1) 1%,rgba(206,220,231,1)
50%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, rgba(89,106,114,1) 1%,rgba(206,220,231,1)
50%,rgba(89,106,114,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#596a72',GradientType=0
); /* IE6-8 */
height: 45px;
position: relative;
top: 30px;
width: 35px;
left: 30px;
border: 3px solid rgb(199, 195, 195);

}

.centro{
border-radius: 35px;
background: black;
height: 21px;
position: relative;
float:left;
top: 12px;
width: 21px;
left:7px;

}
.centro::before{
content:"";
-webkit-border-radius: 35px; 
border-radius: 35px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,125,77,1)),
color-stop(100%,rgba(31,59,8,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(98,125,77,1) 0%,rgba(31,59,8,0.5) 100%);
/* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, rgba(98,125,77,1) 0%,rgba(31,59,8,0.5) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#801f3b08',GradientType=0
); /* IE6-8 */
height: 30px;
position: relative;
float:left;
top: -4px;
width: 30px;
left:-4px;
}
.ani{
position:absolute; 
width:21px;
top:-21px;
left:7px;
animation:reojo 5s alternate infinite;
-moz-animation:reojo 5s alternate infinite; /* Firefox */
-webkit-animation:reojo 5s alternate infinite; /*Safari y Chrome*/
}
@keyframes reojo
{
0%   { top:-1px;left:-1px}
25%  { top:0px;left:0px }
50%  { top:1px;left:1px}
75%  { top:0px;left:0px}
100% { top:-1px; left:-1px }
}

@-moz-keyframes reojo/*Firefox*/
{
0%   { top:-1px;left:-1px}
25%  { top:0px;left:0px }
50%  { top:1px;left:1px}
75%  { top:0px;left:0px}
100% { top:-1px; left:-1px }
}


@-webkit-keyframes reojo{
0%   { top:-1px;left:-1px}
25%  { top:0px;left:0px }
50%  { top:1px;left:1px}
75%  { top:0px;left:0px}
100% { top:-1px; left:-1px }
}
.centro3{
-webkit-border-radius: 35px; 
border-radius: 35px;
background: white;
height: 5px;
position: relative;
float:left;
top: -21px;
width: 5px;
left:18px;
}

.pata{

border-radius: 40px 40px 40px 40px;
transform: rotate(235deg);
-webkit-transform: rotate(235deg);
-ms-transform: rotate(235deg);
border-right: 21px groove rgb(129, 128, 127);
position:absolute;
height: 50px;
top: 321px;
width: 80px;
left: 512px;

}
.pata::before{
content:"";
border-radius: 40px 40px 40px 40px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
border-right: 21px groove rgb(129, 128, 127);
position:absolute;
height: 50px;
top:5px;
width: 80px;
left: -9px;
}
.pata::after{
content:"";
border-radius: 40px 40px 40px 40px;
transform: rotate(-365deg);
-webkit-transform: rotate(-365deg);
-ms-transform: rotate(-365deg);
border-right: 21px groove rgb(129, 128, 127);
position:absolute;
height: 50px;
top:12px;
width: 80px;
left: -18px;
}



#cola {
 -webkit-border-radius: 50%;
border-radius: 50%;  
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-ms-transform: rotate(12deg);
background: -moz-linear-gradient(top, rgba(14,18,247,1) 1%, rgba(201,0,184,1) 13%,
rgba(242,70,110,1) 27%, rgba(234,164,205,1) 42%, rgba(7,244,244,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(14,18,247,1)),
color-stop(13%,rgba(201,0,184,1)), color-stop(27%,rgba(242,70,110,1)), color-stop(42%,rgba(234,164,205,1)),
color-stop(99%,rgba(7,244,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e12f7', endColorstr='#07f4f4',GradientType=0
); /* IE6-8 */
height: 231px;
position: absolute;
float:left;
top: 333px;
width:40px;
left: 675px;
}
#cola::before {
   content:"";
  -webkit-border-radius: 50%;
border-radius: 50%;  
transform: rotate(-23deg);
-webkit-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
background: -moz-linear-gradient(top, rgba(14,18,247,1) 1%, rgba(201,0,184,1) 13%,
rgba(242,70,110,1) 27%, rgba(234,164,205,1) 42%, rgba(7,244,244,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(14,18,247,1)),
color-stop(13%,rgba(201,0,184,1)), color-stop(27%,rgba(242,70,110,1)), color-stop(42%,rgba(234,164,205,1)),
color-stop(99%,rgba(7,244,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e12f7', endColorstr='#07f4f4',GradientType=0
); /* IE6-8 */
height: 231px;
position: absolute;
top: -7px;
width:40px;
left: 43px;

   }  
#cola::after {
  content:"";
 -webkit-border-radius: 50%;
border-radius: 50%;  
transform: rotate(-12deg);
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
background: -moz-linear-gradient(top, rgba(14,18,247,1) 1%, rgba(201,0,184,1) 13%,
rgba(242,70,110,1) 27%, rgba(234,164,205,1) 42%, rgba(7,244,244,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(14,18,247,1)),
color-stop(13%,rgba(201,0,184,1)), color-stop(27%,rgba(242,70,110,1)), color-stop(42%,rgba(234,164,205,1)),
color-stop(99%,rgba(7,244,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(14,18,247,1) 1%,rgba(201,0,184,1) 13%,rgba(242,70,110,1)
27%,rgba(234,164,205,1) 42%,rgba(7,244,244,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e12f7', endColorstr='#07f4f4',GradientType=0
); /* IE6-8 */
height: 281px;
position: absolute;
top: -10px;
width:45px;
left: 23px;

   }  
#flor{
-webkit-border-radius: 0px 412px 0px 412px;
border-radius: 0px 412px 0px 412px; 
transform: rotate(-425deg);
-webkit-transform: rotate(-421deg);
-ms-transform: rotate(-421deg);
background: rgb(146, 17, 125);
height: 152px;
position: absolute;
float:left;
top: 35px;
width:95px;
left:50px;
}
#flor::before{
content:"";
border-radius: 0px 412px 0px 412px; 
transform: rotate(-213deg);
-webkit-transform: rotate(-213deg);
-ms-transform: rotate(-213deg);
background: rgb(102, 30, 102);
height: 152px;
position: absolute;
float:left;
top: -36px;
width:95px;
left: 30px;
}
#flor::after{
content:"";
border-radius: 412px 0px 412px 0px; 
transform: rotate(-213deg);
-webkit-transform: rotate(-213deg);
-ms-transform: rotate(-213deg);
background: rgb(207, 80, 192);
height: 152px;
position: absolute;
float:left;
top: 14px;
width:95px;
left: -47px;
}

.animacion{
position:absolute; 
width:900px;
left:6%;
animation:subebaja 5s alternate infinite;
-moz-animation:subebaja 5s alternate infinite; /* Firefox */
-webkit-animation:subebaja 5s alternate infinite; /*Safari y Chrome*/ 

}
@keyframes subebaja
{
0%   {top:0px; left:0px;}
25%  {top:0px; left:0px; }
30%  {top:-30px; left:112px; }
50%  {top:90px; left:85px; }
60%  {top:182px; left:-121px; }
75%  {top:30px; left:112px; }
90%  {top:0px; left:0px; }
100% {top:0px; left:0px; }
}

@-moz-keyframes subebaja/*Firefox*/
{
0%   {top:0px; left:0px;}
25%  {top:0px; left:0px; }
30%  {top:-30px; left:112px; }
50%  {top:90px; left:85px; }
60%  {top:182px; left:-121px; }
75%  {top:30px; left:112px; }
90%  {top:0px; left:0px; }
100% {top:0px; left:0px; }
}


@-webkit-keyframes subebaja{
0%   {top:0px; left:0px;}
25%  {top:0px; left:0px; }
30%  {top:-30px; left:112px; }
50%  {top:90px; left:102px; }
60%  {top:182px; left:-121px; }
75%  {top:30px; left:112px; }
90%  {top:0px; left:0px; }
100% {top:0px; left:0px; }
}
 

  



















  
  

  




Источник