标签：round eth lap gre server nsf ons csr tom
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 2 pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, 3 q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, 4 dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, 5 thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, 6 footer, header, hgroup, menu, nav, output, ruby, section, summary, time, 7 mark, audio, video { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 13 article, aside, details, figcaption, figure, footer, header, hgroup, 14 menu, nav, section { 15 display: block 16 } 17 18 body { 19 line-height: 1 20 } 21 22 ol, ul { 23 list-style: none 24 } 25 26 blockquote, q { 27 quotes: none 28 } 29 30 blockquote:before, blockquote:after, q:before, q:after { 31 content: ‘‘; 32 content: none 33 } 34 35 table { 36 border-collapse: collapse; 37 border-spacing: 0 38 }
1 /* BODY { 2 background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%); 3 background: linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%); 4 -webkit-background-size: 1em 1em; 5 background-size: 1em 1em; 6 background-color: #000; 7 } */ 8 9 .l-wrapper { 10 position: absolute; 11 width: 480px; 12 height: 300px; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 margin: auto; 18 text-align: center; 19 } 20 21 svg { 22 height: 120px; 23 width: 120px; 24 margin: 0 2em 2em; 25 overflow: visible; 26 /* border: 1px solid red; */ 27 } 28 29 .g-circles { 30 -webkit-transform: scale(0.9) translate(7px, 7px); 31 -ms-transform: scale(0.9) translate(7px, 7px); 32 transform: scale(0.9) translate(7px, 7px); 33 } 34 35 circle { 36 fill: dodgerblue; 37 fill-opacity: 0; 38 -webkit-animation: opacity 1.2s linear infinite; 39 animation: opacity 1.2s linear infinite; 40 } 41 circle:nth-child(12n + 1) { 42 -webkit-animation-delay: -0.1s; 43 animation-delay: -0.1s; 44 } 45 circle:nth-child(12n + 2) { 46 -webkit-animation-delay: -0.2s; 47 animation-delay: -0.2s; 48 } 49 circle:nth-child(12n + 3) { 50 -webkit-animation-delay: -0.3s; 51 animation-delay: -0.3s; 52 } 53 circle:nth-child(12n + 4) { 54 -webkit-animation-delay: -0.4s; 55 animation-delay: -0.4s; 56 } 57 circle:nth-child(12n + 5) { 58 -webkit-animation-delay: -0.5s; 59 animation-delay: -0.5s; 60 } 61 circle:nth-child(12n + 6) { 62 -webkit-animation-delay: -0.6s; 63 animation-delay: -0.6s; 64 } 65 circle:nth-child(12n + 7) { 66 -webkit-animation-delay: -0.7s; 67 animation-delay: -0.7s; 68 } 69 circle:nth-child(12n + 8) { 70 -webkit-animation-delay: -0.8s; 71 animation-delay: -0.8s; 72 } 73 circle:nth-child(12n + 9) { 74 -webkit-animation-delay: -0.9s; 75 animation-delay: -0.9s; 76 } 77 circle:nth-child(12n + 10) { 78 -webkit-animation-delay: -1s; 79 animation-delay: -1s; 80 } 81 circle:nth-child(12n + 11) { 82 -webkit-animation-delay: -1.1s; 83 animation-delay: -1.1s; 84 } 85 circle:nth-child(12n + 12) { 86 -webkit-animation-delay: -1.2s; 87 animation-delay: -1.2s; 88 } 89 90 .g-circles--v2 circle { 91 fill-opacity: 0; 92 stroke-opacity: 0; 93 stroke-width: 1; 94 stroke: yellowgreen; 95 -webkit-animation-name: opacity-stroke, colors, colors-stroke, transform-2; 96 animation-name: opacity-stroke, colors, colors-stroke, transform-2; 97 } 98 99 .g-circles--v3 circle { 100 fill-opacity: 1; 101 -webkit-animation-name: opacity, colors; 102 animation-name: opacity, colors; 103 } 104 105 .g-circles--v4 circle { 106 fill-opacity: 1; 107 fill: orange; 108 -webkit-transform-origin: 60px 60px; 109 -ms-transform-origin: 60px 60px; 110 transform-origin: 60px 60px; 111 -webkit-animation-name: opacity, colors-3, transform; 112 animation-name: opacity, colors-3, transform; 113 } 114 115 @-webkit-keyframes opacity { 116 3% { 117 fill-opacity: 1; 118 } 119 120 75% { 121 fill-opacity: 0; 122 } 123 } 124 125 @keyframes opacity { 126 3% { 127 fill-opacity: 1; 128 } 129 130 75% { 131 fill-opacity: 0; 132 } 133 } 134 @-webkit-keyframes opacity-stroke { 135 10% { 136 stroke-opacity: 1; 137 } 138 139 85% { 140 stroke-opacity: 0; 141 } 142 } 143 @keyframes opacity-stroke { 144 10% { 145 stroke-opacity: 1; 146 } 147 148 85% { 149 stroke-opacity: 0; 150 } 151 } 152 @-webkit-keyframes colors { 153 0% { 154 fill: yellowgreen; 155 } 156 157 10% { 158 fill: gold; 159 } 160 161 75% { 162 fill: crimson; 163 } 164 } 165 @keyframes colors { 166 0% { 167 fill: yellowgreen; 168 } 169 170 10% { 171 fill: gold; 172 } 173 174 75% { 175 fill: crimson; 176 } 177 } 178 @-webkit-keyframes colors-stroke { 179 0% { 180 stroke: yellowgreen; 181 } 182 183 10% { 184 stroke: gold; 185 } 186 187 75% { 188 stroke: crimson; 189 } 190 } 191 @keyframes colors-stroke { 192 0% { 193 stroke: yellowgreen; 194 } 195 196 10% { 197 stroke: gold; 198 } 199 200 75% { 201 stroke: crimson; 202 } 203 } 204 @-webkit-keyframes colors-2 { 205 0% { 206 fill: yellow; 207 } 208 209 50% { 210 fill: red; 211 } 212 213 65% { 214 fill: orangered; 215 } 216 217 95% { 218 fill: gold; 219 } 220 } 221 @keyframes colors-2 { 222 0% { 223 fill: yellow; 224 } 225 226 50% { 227 fill: red; 228 } 229 230 65% { 231 fill: orangered; 232 } 233 234 95% { 235 fill: gold; 236 } 237 } 238 @-webkit-keyframes colors-3 { 239 0% { 240 fill: yellowgreen; 241 } 242 243 50% { 244 fill: turquoise; 245 } 246 247 65% { 248 fill: yellow; 249 } 250 251 95% { 252 fill: orange; 253 } 254 } 255 @keyframes colors-3 { 256 0% { 257 fill: yellowgreen; 258 } 259 260 50% { 261 fill: turquoise; 262 } 263 264 65% { 265 fill: yellow; 266 } 267 268 95% { 269 fill: orange; 270 } 271 } 272 @-webkit-keyframes transform { 273 10% { 274 -webkit-transform: scale(0.75); 275 transform: scale(0.75); 276 } 277 } 278 @keyframes transform { 279 10% { 280 -webkit-transform: scale(0.75); 281 transform: scale(0.75); 282 } 283 } 284 @-webkit-keyframes transform-2 { 285 40% { 286 -webkit-transform: scale(0.85); 287 transform: scale(0.85); 288 } 289 290 60% { 291 stroke-width: 20; 292 } 293 } 294 @keyframes transform-2 { 295 40% { 296 -webkit-transform: scale(0.85); 297 transform: scale(0.85); 298 } 299 300 60% { 301 stroke-width: 20; 302 } 303 }
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"><link rel="stylesheet" href="reset.css"> 5 <link rel="stylesheet" href="style.css" media="screen" type="text/css"> 6 </head> 7 8 <body> 9 <form class="form-horizontal " id="my_servers_id" method = ‘post‘ > 10 {% csrf_token %} 11 <div id=‘table_server‘style="overflow-y: auto; height: 300px;"> 12 ... 13 ... 14 ... 15 </div> 16 <button class="btn btn-info" style="width:140px" type="button" onclick="ajax_loading(‘my_servers_id‘,‘{% url ‘videomap-urls:check-user-servers-state‘ %}‘,‘start_server_id‘)" id=‘start_server_id‘ name=‘start_server_name‘ value=‘start_server‘ > 17 <i class="icon icon-play-circle"></i> Start </button> 18 </form> 19 <div class="l-wrapper" id=‘loading‘ style=‘width:200px;heigth:200px;display:none‘> 20 <svg viewBox="0 0 120 120" > 21 <g id="circle" class="g-circles g-circles--v1"> 22 <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle> 23 <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle> 24 <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle> 25 <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle> 26 <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle> 27 <circle id="7" cx="60" cy="110" r="10"></circle> 28 <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle> 29 <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle> 30 <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle> 31 <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle> 32 <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle> 33 <circle id="1" cx="60" cy="10" r="10"></circle> 34 </g> 35 </svg> 36 </div> 37 <script> 38 function ajax_loading(form_id,url,button_id){ 39 if (button_id){ 40 name=document.getElementById(button_id).name 41 value=document.getElementById(button_id).value 42 console.log(name,value) 43 need_data=$(‘#‘+form_id).serialize()+‘&{0}={1}‘.format(name,value) 44 }else{ 45 need_data=$(‘#‘+form_id).serialize() 46 } 47 console.log(need_data) 48 document.getElementById(‘loading‘).style.display=‘block‘; 49 $.ajax({ 50 url:url, 51 type:"post", 52 dataType: "html", 53 data:need_data, 54 success:function(mes){ 55 $(document.body).html( mes); 56 } 57 }) 58 } 59 </script> 60 </body> 61 </html>
标签：round eth lap gre server nsf ons csr tom
原文地址：https://www.cnblogs.com/mianbaoshu/p/8004760.html
