主页 / 问题 / 819186
Accepted
Алексей Соколов
Asked:2020-04-25 19:24:38 +0000 UTC2020-04-25 19:24:38 +0000 UTC

需要css或js中动画蜂鸟的动画[关闭]

  • 772

css需要在或上飞行蜂鸟的动画js。

javascript

2 个回答

  1. Best Answer

    这样的另一个 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); }
}
    <svg id="colibri" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-50 -50 429.297 429.297" width="512" height="512">
	<g>
		<path class="d" style="fill:#333E48;" d="M421.797,91.477h-120c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h120c4.143,0,7.5,3.358,7.5,7.5   S425.939,91.477,421.797,91.477z"/>
		<g>
			<g>
				<path style="fill:#95D600;" d="M101.688,270.356c-9.619,39.354-12.315,79.575-5.386,112.314     c11.995,28.141,94.57,3.46,72.427-22.143c-8.303-8.535-36.443-39.212-22.605-70.12L101.688,270.356z"/>
			</g>
			<path style="fill:#95D600;" d="M286.05,134.579c0-11.972,22.343-25.701,22.343-44.602c0-27.691-26.73-55.841-57.571-55.841    c-30.84,0-55.842,25.001-55.842,55.841c0,22.306-0.316,28.558-8.416,34.508c-0.561,0.376-1.119,0.769-1.678,1.159    c-0.092,0.06-0.178,0.119-0.27,0.179l0.003,0.007c-44.531,31.325-79.826,107.864-89.526,179.168    c8.083,1.207,16.356,1.839,24.777,1.839c91.838,0,166.287-74.45,166.287-166.288c0-1.999-0.042-3.988-0.112-5.971L286.05,134.579z    "/>
			<path style="fill:#229CD2;" d="M286.05,134.579c0-6.586,6.76-13.706,12.844-21.924c-10.453,12.701-36.291,8.325-44.506,33.654    c-7.024,21.661,16.619,32.515,22.554,48.932c5.964-17.13,9.215-35.529,9.215-54.691c0-1.999-0.042-3.988-0.112-5.971    L286.05,134.579z"/>
			<path style="opacity:0.2;fill:#218649;" d="M273.813,203.527h-148.5c-9.895,20.847-17.953,43.686-23.61,66.835l-0.014-0.006    c-0.127,0.523-0.24,1.046-0.365,1.568c-0.318,1.327-0.627,2.656-0.929,3.984c-0.283,1.246-0.559,2.491-0.828,3.737    c-0.257,1.193-0.508,2.387-0.753,3.581c-0.257,1.253-0.506,2.504-0.748,3.756c-0.25,1.297-0.494,2.593-0.729,3.889    c-0.2,1.107-0.395,2.214-0.584,3.32c-0.247,1.445-0.485,2.89-0.712,4.332c-0.146,0.935-0.288,1.869-0.427,2.802    c-0.181,1.226-0.356,2.45-0.522,3.673c0.002,0,0.004,0,0.006,0.001c-3.763,27.661-3.692,54.536,1.205,77.67    c11.995,28.141,94.57,3.46,72.427-22.143c-6.959-7.153-27.848-29.861-26.282-55.222    C202.114,297.204,251.723,257.46,273.813,203.527z"/>
			<path style="opacity:0.3;fill:#218649;" d="M142.45,305.305c-7.385,1.004-14.921,1.532-22.581,1.532    c-2.604,0-5.193-0.067-7.768-0.187c-0.396,4.377-0.713,8.74-0.927,13.075c8.156,0.513,16.453,0.434,24.843-0.287    c2.532-0.218,5.043-0.5,7.538-0.828C142.604,314.311,142.17,309.85,142.45,305.305z"/>
		</g>
		<circle style="fill:#333E48;" cx="277.139" cy="70.821" r="5.536"/>
		<path style="opacity:0.2;" d="M180.079,129.205c-26.835,21.014-50.006,58.286-65.771,100.292c16.935,5.397,34.975,8.321,53.7,8.321   c25.222,0,45.669-20.449,45.669-45.672C213.678,165.15,200.676,144.642,180.079,129.205z"/>
		<g class="fly">
			<path style="fill:#00953A;" d="M0,76.359C12.104,162.141,85.805,228.13,174.928,228.13c25.223,0,45.67-20.448,45.67-45.671    C220.598,96.675,89.383,76.359,0,76.359z"/>
			<path style="fill:#00953A;" d="M0,76.359C12.104,162.141,85.805,228.13,174.928,228.13c25.223,0,45.67-20.448,45.67-45.671    C220.598,96.675,89.383,76.359,0,76.359z"/>
			<path style="fill:#95D600;" d="M4.194,97.003c20.09,75.498,88.907,131.127,170.733,131.127c11.493,0,21.985-4.254,30.012-11.262    c0.667-0.99,1.308-1.999,1.896-3.042c0.592-2.962,0.907-6.025,0.907-9.163C207.743,123.847,93.384,100.103,4.194,97.003z"/>
			<path style="opacity:0.2;fill:#218649;" d="M0,76.359c9.331,66.12,55.259,120.471,116.633,141.917V89.098    C78.473,79.637,35.87,76.359,0,76.359z"/>
		</g>
	</g>
</svg>

    • 5

  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; }
}
     
<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>

    资源

    • 4

相关问题