SHOW:
|
|
- or go back to the newest paste.
| 1 | ||
| 2 | ||
| 3 | <!DOCTYPE html> | |
| 4 | <html> | |
| 5 | <head> | |
| 6 | <link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'> | |
| 7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> | |
| 8 | - | var degs = 360/$("#test").children().size();
|
| 8 | + | |
| 9 | - | for (var i=1;i<=$("#test").children().size();++i)
|
| 9 | + | |
| 10 | - | {
|
| 10 | + | function Rotate(tt) |
| 11 | - | $("#test > div:nth-child("+i+")").css("transform", "rotate("+(i*degs)+"deg)");
|
| 11 | + | |
| 12 | var degs = 360/$(tt).children().size(); | |
| 13 | for (var i=1;i<=$(tt).children().size();++i) | |
| 14 | {
| |
| 15 | $(tt+" > div:nth-child("+i+")").css("transform", "rotate("+(i*degs)+"deg)");
| |
| 16 | } | |
| 17 | }; | |
| 18 | $(document).ready(function(){
| |
| 19 | Rotate("#test1");
| |
| 20 | Rotate("#test2");
| |
| 21 | }); | |
| 22 | - | #test{
|
| 22 | + | |
| 23 | <style> | |
| 24 | * | |
| 25 | - | animation:mymove 5s linear infinite; |
| 25 | + | |
| 26 | - | -webkit-animation:mymove 5s linear infinite; /*Safari and Chrome*/ |
| 26 | + | |
| 27 | margin: 0; | |
| 28 | - | #test > div |
| 28 | + | |
| 29 | } | |
| 30 | .abs {
| |
| 31 | position: absolute; | |
| 32 | } | |
| 33 | - | position:absolute; |
| 33 | + | .cont {
|
| 34 | display: table-cell; | |
| 35 | text-decoration: none; | |
| 36 | vertical-align: middle; | |
| 37 | - | @keyframes mymove |
| 37 | + | |
| 38 | .cont, .cont * {
| |
| 39 | height: 150px; | |
| 40 | width: 150px; | |
| 41 | } | |
| 42 | .cont * {
| |
| 43 | - | @-webkit-keyframes mymove /*Safari and Chrome*/ |
| 43 | + | line-height: normal; |
| 44 | } | |
| 45 | .cont>div {
| |
| 46 | margin: auto; | |
| 47 | } | |
| 48 | .cont > div > div {
| |
| 49 | text-align: center; | |
| 50 | position: absolute; | |
| 51 | } | |
| 52 | - | <div id="test"> |
| 52 | + | #test1, #test1 > div {
|
| 53 | height: 130px; | |
| 54 | width: 130px; | |
| 55 | font-family: 'Black Ops One', cursive; | |
| 56 | font-size: 0.9em; | |
| 57 | text-shadow: 0 0 10px; | |
| 58 | } | |
| 59 | #test2, #test2 > div {
| |
| 60 | height: 100px; | |
| 61 | width: 100px; | |
| 62 | font-family: 'Black Ops One', cursive; | |
| 63 | font-size: 0.8em; | |
| 64 | text-shadow: 0 0 10px; | |
| 65 | } | |
| 66 | #test1 {
| |
| 67 | animation:right 10s linear infinite; | |
| 68 | -webkit-animation:right 10s linear infinite; /*Safari and Chrome*/ | |
| 69 | } | |
| 70 | #test2 {
| |
| 71 | animation:left 11s linear infinite; | |
| 72 | -webkit-animation:left 3s linear infinite; /*Safari and Chrome*/ | |
| 73 | } | |
| 74 | ||
| 75 | @keyframes right | |
| 76 | {
| |
| 77 | from {transform: rotate(0deg);}
| |
| 78 | to {transform: rotate(360deg);}
| |
| 79 | } | |
| 80 | @keyframes left | |
| 81 | {
| |
| 82 | from {transform: rotate(0deg);}
| |
| 83 | to {transform: rotate(-360deg);}
| |
| 84 | } | |
| 85 | @-webkit-keyframes right /*Safari and Chrome*/ | |
| 86 | {
| |
| 87 | from {-webkit-transform: rotate(0deg);}
| |
| 88 | to {-webkit-transform: rotate(360deg);}
| |
| 89 | } | |
| 90 | @-webkit-keyframes left /*Safari and Chrome*/ | |
| 91 | {
| |
| 92 | from {-webkit-transform: rotate(0deg);}
| |
| 93 | to {-webkit-transform: rotate(-360deg);}
| |
| 94 | } | |
| 95 | </style> | |
| 96 | </head> | |
| 97 | <body> | |
| 98 | ||
| 99 | <div class="abs"> | |
| 100 | <div class="cont" style="background: url('http://projectcode.zzl.org/Download/../Image/Logo/Logo_PM.png') no-repeat scroll center center transparent;">
| |
| 101 | <div id="test1"> | |
| 102 | <div>P</div> | |
| 103 | <div>r</div> | |
| 104 | <div>o</div> | |
| 105 | <div>j</div> | |
| 106 | <div>e</div> | |
| 107 | <div>c</div> | |
| 108 | <div>t</div> | |
| 109 | <div> </div> | |
| 110 | <div>c</div> | |
| 111 | <div>o</div> | |
| 112 | <div>d</div> | |
| 113 | <div>e</div> | |
| 114 | <div> </div> | |
| 115 | <div>P</div> | |
| 116 | <div>r</div> | |
| 117 | <div>o</div> | |
| 118 | <div>j</div> | |
| 119 | <div>e</div> | |
| 120 | <div>c</div> | |
| 121 | <div>t</div> | |
| 122 | <div> </div> | |
| 123 | <div>c</div> | |
| 124 | <div>o</div> | |
| 125 | <div>d</div> | |
| 126 | <div>e</div> | |
| 127 | <div> </div> | |
| 128 | </div> | |
| 129 | </div> | |
| 130 | </div> | |
| 131 | ||
| 132 | <div class="abs"> | |
| 133 | <div class="cont"> | |
| 134 | <div id="test2"> | |
| 135 | <div>1</div> | |
| 136 | <div>1</div> | |
| 137 | <div>1</div> | |
| 138 | <div>1</div> | |
| 139 | <div>1</div> | |
| 140 | <div>0</div> | |
| 141 | <div>0</div> | |
| 142 | <div>1</div> | |
| 143 | <div>0</div> | |
| 144 | <div>0</div> | |
| 145 | <div>1</div> | |
| 146 | <div> </div> | |
| 147 | <div>1</div> | |
| 148 | <div>1</div> | |
| 149 | <div>1</div> | |
| 150 | <div>1</div> | |
| 151 | <div>1</div> | |
| 152 | <div>0</div> | |
| 153 | <div>0</div> | |
| 154 | <div>1</div> | |
| 155 | <div>0</div> | |
| 156 | <div>0</div> | |
| 157 | <div>1</div> | |
| 158 | <div> </div> | |
| 159 | </div> | |
| 160 | </div> | |
| 161 | </div> | |
| 162 | </body> | |
| 163 | </html> |
