HTML
<title>Serv</title>
<div style="text-align: center;">
<a href="#">
<img src="https://cordova.apache.org/static/img/cordova_bot.png" style="width: 80px; height: 80px;" /></a>
</div>
<br />
<pre>
<div style="text-align: center;">
<span style="font-size:24px;"><span style="font-family:courier new,courier,monospace;">
Probando Ping a codigo serv.html en el servidor codepad.co
Ping HTML - JS - CSS
</span></span>
</div>
</pre>
<br />
<div>
<div id="movingBallG">
<div class="movingBallLineG"> </div>
<div class="movingBallG" id="movingBallG_1"> </div>
</div>
</div>
<style type="text/css">
* { margin, padding: 0; }
body {
background: #e3e3e3 url(bg.png);
margin: 0px;
}
h1 a {
display: block; text-decoration: none;
font: 20px Helvetica, Arial, Sans-Serif; letter-spacing: 3px;
text-align: left;
color: #2E2E2E; text-shadow: 0px 2px 3px #3C86B0;
}
h1 a:hover {
color: #3C86B0; text-shadow: 0px 2px 3px #3C86B0;
}
pre {
width: 1000px; margin: 0 auto; background: #222; padding: 0px;
font-size: 5px; color: #81DAF5; text-shadow: 0px 2px 3px #81DAF5;
-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
</style>
<style type="text/css">
#movingBallG{
position:relative;
width:1356px;
height:20px;
}
.movingBallLineG{
position:absolute;
left:0px;
top:8px;
height:4px;
width:1356px;
background-color:#627e9d;
}
.movingBallG{
background-color:#3b7bc4;
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
-moz-border-radius:10px;
-moz-animation-name:bounce_movingBallG;
-moz-animation-duration:3.2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-webkit-border-radius:10px;
-webkit-animation-name:bounce_movingBallG;
-webkit-animation-duration:3.2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-ms-border-radius:10px;
-ms-animation-name:bounce_movingBallG;
-ms-animation-duration:3.2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-o-border-radius:10px;
-o-animation-name:bounce_movingBallG;
-o-animation-duration:3.2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
border-radius:10px;
animation-name:bounce_movingBallG;
animation-duration:3.2s;
animation-iteration-count:infinite;
animation-direction:normal;
}
@-moz-keyframes bounce_movingBallG{
0%{
left:0px;
}
100%{
left:1000px;
}
100%{
left:0px;
}
}
@-webkit-keyframes bounce_movingBallG{
0%{
left:0px;
}
50%{
left:1038px;
}
100%{
left:0px;
}
}
@-ms-keyframes bounce_movingBallG{
0%{
left:0px;
}
50%{
left:1200px;
}
100%{
left:0px;
}
}
@-o-keyframes bounce_movingBallG{
0%{
left:0px;
}
50%{
left:1200px;
}
100%{
left:0px;
}
}
@keyframes bounce_movingBallG{
0%{
left:0px;
}
50%{
left:1200px;
}
100%{
left:0px;
}
}
</style>
