Created
June 29, 2012 10:56
-
-
Save samarkandiy/3017336 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Animated Gears · CodePen</title> | |
| <style> | |
| body{ | |
| background: #222 | |
| } | |
| .container{ | |
| background: rgb(149,149,149); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */ | |
| width: 500px; | |
| height: 800px; | |
| } | |
| /* CSS3 */ | |
| @-webkit-keyframes ckw { | |
| 0% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| } | |
| @-moz-keyframes ckw { | |
| 0% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes cckw { | |
| 0% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| } | |
| @-moz-keyframes cckw { | |
| 0% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| } | |
| /* Gears */ | |
| .gear { | |
| float: none; | |
| position: absolute; | |
| text-align: center; | |
| -moz-animation-timing-function: linear; | |
| -moz-animation-iteration-count: infinite; | |
| -moz-animation-direction: normal; | |
| -moz-animation-delay: 0; | |
| -moz-animation-play-state: running; | |
| -moz-animation-fill-mode: forwards; | |
| -webkit-animation-timing-function: linear; | |
| -webkit-animation-iteration-count: infinite; | |
| -webkit-animation-direction: normal; | |
| -webkit-animation-delay: 0; | |
| -webkit-animation-play-state: running; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| #gear1 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g1.png') no-repeat 0 0; | |
| height: 85px; | |
| left: 31px; | |
| top: 45px; | |
| width: 85px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 10s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 10s; | |
| } | |
| #gear2 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g2.png') no-repeat 0 0; | |
| height: 125px; | |
| left: 105px; | |
| top: 10px; | |
| width: 125px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 16.84s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 16.84s; | |
| } | |
| #gear3 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g3.png') no-repeat 0 0; | |
| height: 103px; | |
| left: 149px; | |
| top: 118px; | |
| width: 103px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 13.5s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 13.5s; | |
| } | |
| #gear4 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g4.png') no-repeat 0 0; | |
| height: 144px; | |
| left: 46px; | |
| top: 173px; | |
| width: 144px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 20.2s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 20.2s; | |
| } | |
| #gear5 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g1.png') no-repeat 0 0; | |
| height: 85px; | |
| left: 127px; | |
| top: 292px; | |
| width: 85px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 10s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 10s; | |
| } | |
| #gear6 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g2.png') no-repeat 0 0; | |
| height: 125px; | |
| left: 200px; | |
| top: 283px; | |
| width: 125px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 16.84s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 16.84s; | |
| } | |
| #gear7 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g3.png') no-repeat 0 0; | |
| height: 103px; | |
| left: 277px; | |
| top: 217px; | |
| width: 103px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 13.5s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 13.5s; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <body> | |
| <div class="container"> | |
| <div class="gear" id="gear1"></div> | |
| <div class="gear" id="gear2"></div> | |
| <div class="gear" id="gear3"></div> | |
| <div class="gear" id="gear4"></div> | |
| <div class="gear" id="gear5"></div> | |
| <div class="gear" id="gear6"></div> | |
| <div class="gear" id="gear7"></div> | |
| </div> | |
| </body> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/html5web/pen/animatedgears/1">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container"> | |
| <div class="gear" id="gear1"></div> | |
| <div class="gear" id="gear2"></div> | |
| <div class="gear" id="gear3"></div> | |
| <div class="gear" id="gear4"></div> | |
| <div class="gear" id="gear5"></div> | |
| <div class="gear" id="gear6"></div> | |
| <div class="gear" id="gear7"></div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background: #222 | |
| } | |
| .container{ | |
| background: rgb(149,149,149); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */ | |
| width: 500px; | |
| height: 800px; | |
| } | |
| /* CSS3 */ | |
| @-webkit-keyframes ckw { | |
| 0% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| } | |
| @-moz-keyframes ckw { | |
| 0% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes cckw { | |
| 0% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| } | |
| @-moz-keyframes cckw { | |
| 0% { | |
| -moz-transform: rotate(360deg); | |
| -webkit-transform: rotate(360deg); | |
| } | |
| 100% { | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| } | |
| /* Gears */ | |
| .gear { | |
| float: none; | |
| position: absolute; | |
| text-align: center; | |
| -moz-animation-timing-function: linear; | |
| -moz-animation-iteration-count: infinite; | |
| -moz-animation-direction: normal; | |
| -moz-animation-delay: 0; | |
| -moz-animation-play-state: running; | |
| -moz-animation-fill-mode: forwards; | |
| -webkit-animation-timing-function: linear; | |
| -webkit-animation-iteration-count: infinite; | |
| -webkit-animation-direction: normal; | |
| -webkit-animation-delay: 0; | |
| -webkit-animation-play-state: running; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| #gear1 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g1.png') no-repeat 0 0; | |
| height: 85px; | |
| left: 31px; | |
| top: 45px; | |
| width: 85px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 10s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 10s; | |
| } | |
| #gear2 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g2.png') no-repeat 0 0; | |
| height: 125px; | |
| left: 105px; | |
| top: 10px; | |
| width: 125px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 16.84s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 16.84s; | |
| } | |
| #gear3 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g3.png') no-repeat 0 0; | |
| height: 103px; | |
| left: 149px; | |
| top: 118px; | |
| width: 103px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 13.5s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 13.5s; | |
| } | |
| #gear4 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g4.png') no-repeat 0 0; | |
| height: 144px; | |
| left: 46px; | |
| top: 173px; | |
| width: 144px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 20.2s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 20.2s; | |
| } | |
| #gear5 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g1.png') no-repeat 0 0; | |
| height: 85px; | |
| left: 127px; | |
| top: 292px; | |
| width: 85px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 10s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 10s; | |
| } | |
| #gear6 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g2.png') no-repeat 0 0; | |
| height: 125px; | |
| left: 200px; | |
| top: 283px; | |
| width: 125px; | |
| -moz-animation-name: cckw; | |
| -moz-animation-duration: 16.84s; | |
| -webkit-animation-name: cckw; | |
| -webkit-animation-duration: 16.84s; | |
| } | |
| #gear7 { | |
| background: url('http://iweb.uz/wp-content/uploads/2012/06/g3.png') no-repeat 0 0; | |
| height: 103px; | |
| left: 277px; | |
| top: 217px; | |
| width: 103px; | |
| -moz-animation-name: ckw; | |
| -moz-animation-duration: 13.5s; | |
| -webkit-animation-name: ckw; | |
| -webkit-animation-duration: 13.5s; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment