Анимированная колибри

203
26 апреля 2018, 06:58

Подскажите пожалуйста, может есть у кого-то вариант летающей колибри, нужна анимация на css или js, уже перерыл все знакомые источники, так ничего и не нашел.

Answer 1

Решение 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; } 
}
  
<div id="cuadro"> 
  <div class="col"> 
<div id="flor"></div> 
<div class="animacion"> 
<div id="cuerpo"></div> 
<div id="alas"></div> 
<div id="cola"></div> 
<div id="circulo"><div class="cabeza"><div class="ojo"> 
<div class="ani"> 
<div class="centro"><div class="centro3"></div></div> 
</div> 
</div></div></div> 
<div class="pico"></div> 
<div class="pico3"></div> 
<div class="pico4"></div> 
<div class="pico5"></div> 
<div class="pata"></div> 
</div> 
</div>

Источник

READ ALSO
Проблемы с кодировкой (но это не точно)
Java

Проблемы с кодировкой (но это не точно)

Всем приветВозникли проблемы с кодировкой

 221
Проверка интернет соединения. Java [требует правки]
Java

Проверка интернет соединения. Java [требует правки]

Пишу программу для ПКНужен скрипт проверки интернет соединения, который бы подходил для всех ОС, которые поддерживает java

 196
Как запустить проект Spring MVC в IntelliJ IDEA?
Java

Как запустить проект Spring MVC в IntelliJ IDEA?

Создал простенький проект в IntelliJ IDEAУ меня есть WEB-INF, контроллер, модель

 265
Невыбирается индекс в jTable
Java

Невыбирается индекс в jTable

Здравствуйте у меня есть в таблице ячейки с выпадающими списками, когда я нажимаю на любую из ячеек тогда я могу спокойно узнать ее положение...

 199