Кеша

 
 
 
 
 

 

Код:

<style> <!--/*--><![CDATA[/* ><!--*/ #parrot-wrapper { padding: 40px; background-color: #A5D2F0; } #parrot { width: 220px; height: 220px; min-width: 220px; min-height: 220px; position: relative; margin: 10px auto; } #header { position: absolute; width: 90px; height: 90px; border-radius: 50%; right: 0; } #face { position: absolute; width: 90px; height: 90px; border-radius: 50%; right: 0; background-color: white; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1); z-index: 20; } #eye { position: absolute; left: 10px; top: 50%; margin-top: -12.5px; width: 25px; height: 25px; background-color: #4F4F4F; border-radius: 50%; z-index: 100; } #pupil { background: white; position: absolute; height: 10px; width: 10px; right: 2px; top: 8px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-animation: pupil 10s infinite; -o-animation: pupil 10s infinite; animation: pupil 10s infinite; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #peakt { width: 110px; height: 110px; position: absolute; right: -21px; border-radius: 50%; background: linear-gradient(to bottom, rgba(241, 185, 77, 1) 0%, rgba(241, 185, 77, 1) 7%, rgba(241, 185, 77, 1) 26%, rgba(241, 185, 77, 1) 39%, rgba(241, 185, 77, 1) 47%, rgba(241, 185, 77, 1) 50%, rgba(241, 185, 77, 0) 51%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1b94d', endColorstr='#00ffffff', GradientType=0); } #peakf { width: 70px; height: 70px; position: absolute; right: 12px; border-radius: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(240, 154, 57, 0) 49%, rgba(240, 152, 53, 1) 50%, rgba(240, 152, 53, 1) 76%, rgba(240, 152, 53, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#f09835', GradientType=0); bottom: 0; z-index: 10; } #body { position: absolute; top: 0; z-index: 10; width: 75px;; background-color: #18A47E; border-radius: 200px 0; right: 45px; height: 180px; } #wing1, #wing2, #wing3, #shadowing { position: absolute; border-radius: 61%; background: linear-gradient(to right, rgba(24, 164, 126, 1) 0%, rgba(24, 164, 126, 1) 17%, rgba(24, 164, 126, 1) 40%, rgba(24, 164, 126, 0) 41%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18a47e', endColorstr='#00ffffff', GradientType=1); /* IE6-8 */ transform: rotate(-60deg); z-index: 200; } #wing1 { z-index: 11; height: 130px; width: 100px; top: -25px; right: 30px; transform: rotate(-50deg); -webkit-animation: movewingp 2s infinite; -o-animation: movewingp 2s infinite; animation: movewingp 2s infinite; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #wing2 { z-index: 111; height: 130px; width: 100px; top: 5px; right: 25px; transform: rotate(-75deg); -webkit-animation: movewings 2s infinite; -o-animation: movewings 2s infinite; animation: movewings 2s infinite; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #wing3 { z-index: 11; height: 130px; width: 100px; top: 26px; right: 14px; transform: rotate(-100deg); -webkit-animation: movewingt 2s infinite; -o-animation: movewingt 2s infinite; animation: movewingt 2s infinite; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #shadowing { z-index: 1; height: 130px; width: 100px; top: 37px; right: 13px; background: -moz-linear-gradient(left, rgba(32, 142, 113, 1) 0%, rgba(32, 142, 113, 1) 21%, rgba(32, 142, 113, 1) 40%, rgba(32, 142, 113, 0) 41%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(32, 142, 113, 1)), color-stop(21%, rgba(32, 142, 113, 1)), color-stop(40%, rgba(32, 142, 113, 1)), color-stop(41%, rgba(32, 142, 113, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(32, 142, 113, 1) 0%, rgba(32, 142, 113, 1) 21%, rgba(32, 142, 113, 1) 40%, rgba(32, 142, 113, 0) 41%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(32, 142, 113, 1) 0%, rgba(32, 142, 113, 1) 21%, rgba(32, 142, 113, 1) 40%, rgba(32, 142, 113, 0) 41%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(32, 142, 113, 1) 0%, rgba(32, 142, 113, 1) 21%, rgba(32, 142, 113, 1) 40%, rgba(32, 142, 113, 0) 41%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(32, 142, 113, 1) 0%, rgba(32, 142, 113, 1) 21%, rgba(32, 142, 113, 1) 40%, rgba(32, 142, 113, 0) 41%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#208e71', endColorstr='#00ffffff', GradientType=1); transform: rotate(-110deg); /* IE6-8 */ -webkit-animation: shadow 2s infinite; -o-animation: shadow 2s infinite; animation: shadow 2s infinite; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #shadowing:before { content: ''; position: absolute; width: 30px; height: 30px; background: #A5D2F0; transform: rotate(47deg); top: -15px; left: 15px; } #foot { position: absolute; width: 125px; height: 125px; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(49%, rgba(29, 166, 129, 0)), color-stop(50%, rgba(24, 164, 126, 1)), color-stop(76%, rgba(24, 164, 126, 1)), color-stop(100%, rgba(24, 164, 126, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 128, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#18a47e', GradientType=0); border-radius: 50%; left: 24px; transform: rotate(-65deg); z-index: 8; top: 55px; /* IE6-8 */ } #tail { position: absolute; width: 80px; height: 80px; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(49%, rgba(29, 166, 129, 0)), color-stop(50%, rgba(24, 164, 126, 1)), color-stop(76%, rgba(24, 164, 126, 1)), color-stop(100%, rgba(24, 164, 126, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 129, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(29, 166, 128, 0) 49%, rgba(24, 164, 126, 1) 50%, rgba(24, 164, 126, 1) 76%, rgba(24, 164, 126, 1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#18a47e', GradientType=0); border-radius: 50%; left: 22px; transform: rotate(-65deg); bottom: 10px; /* IE6-8 */; /* IE6-8 */ } @-webkit-keyframes movewingp { 10% { transform: rotate(-50deg); } 50% { transform: rotate(-60deg); } 90% { transform: rotate(-50deg); } } @keyframes movewingp { 10% { transform: rotate(-50deg); } 50% { transform: rotate(-60deg); } 90% { transform: rotate(-50deg); } } @-webkit-keyframes movewings { 10% { transform: rotate(-75deg); } 50% { transform: rotate(-85deg); } 90% { transform: rotate(-75deg); } } @keyframes movewings { 10% { transform: rotate(-75deg); } 50% { transform: rotate(-85deg); } 90% { transform: rotate(-75deg); } } @-webkit-keyframes movewingt { 10% { transform: rotate(-100deg); } 50% { transform: rotate(-110deg); } 90% { transform: rotate(-100deg); } } @keyframes movewingt { 10% { transform: rotate(-100deg); } 50% { transform: rotate(-110deg); } 90% { transform: rotate(-100deg); } } @keyframes shadow { 10% { height: 130px; } 50% { height: 125px; } 90% { height: 130px; } } @-webkit-keyframes shadow { 10% { height: 130px; } 50% { height: 125px; } 90% { height: 130px; } } @keyframes pupil { 40% { top: 8px; right: 2px;} 48% { top: 5px; right: 3px;} 53% { top: 2px; right: 4px;} 62% { top: 5px; right: 3px;} 80% { top: 8px; } } @-webkit-keyframes pupil { 40% { top: 8px; right: 2px;} 48% { top: 5px; right: 3px;} 53% { top: 2px; right: 4px;} 62% { top: 5px; right: 3px;} 80% { top: 8px; } } /*--><!]]>*/ </style><div id="parrot-wrapper"> <div id="parrot"> <div id="header"> <div id="peakt"></div> <div id="face"></div> <div id="eye"> <div id="pupil"></div> </div> <div id="peakf"></div> </div> <div id="body"> <div id="wing1"></div> <div id="wing2"></div> <div id="wing3"></div> <div id="shadowing"></div> </div> <div id="foot"></div> <div id="tail"></div> </div> </div> <p></p>