change of button using animation
This commit is contained in:
parent
97e0390680
commit
55e621a45a
|
@ -107,6 +107,7 @@ function I(id){return document.getElementById(id);}
|
||||||
body{
|
body{
|
||||||
text-align:center;
|
text-align:center;
|
||||||
font-family:"Roboto",sans-serif;
|
font-family:"Roboto",sans-serif;
|
||||||
|
|
||||||
}
|
}
|
||||||
h1{
|
h1{
|
||||||
color:#404040;
|
color:#404040;
|
||||||
|
@ -149,10 +150,12 @@ function I(id){return document.getElementById(id);}
|
||||||
height:9em;
|
height:9em;
|
||||||
position:relative;
|
position:relative;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
|
border: 2px solid black;
|
||||||
}
|
}
|
||||||
div.testName{
|
div.testName{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0.1em; left:0;
|
top:0.4em; left:0;
|
||||||
|
|
||||||
width:100%;
|
width:100%;
|
||||||
font-size:1.4em;
|
font-size:1.4em;
|
||||||
z-index:9;
|
z-index:9;
|
||||||
|
@ -173,6 +176,11 @@ function I(id){return document.getElementById(id);}
|
||||||
#pingText,#jitText{
|
#pingText,#jitText{
|
||||||
color:#AA6060;
|
color:#AA6060;
|
||||||
}
|
}
|
||||||
|
#ipArea {
|
||||||
|
position: relative;
|
||||||
|
top:1em
|
||||||
|
|
||||||
|
}
|
||||||
div.meterText:empty:before{
|
div.meterText:empty:before{
|
||||||
color:#505050 !important;
|
color:#505050 !important;
|
||||||
content:"0.00";
|
content:"0.00";
|
||||||
|
@ -232,8 +240,8 @@ function I(id){return document.getElementById(id);}
|
||||||
<div class="unit">ms</div>
|
<div class="unit">ms</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="ipArea">
|
<div id="ipArea"><h4>IP Address:</h4>
|
||||||
IP Address: <span id="ip"></span>
|
<span id="ip"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="https://github.com/librespeed/speedtest">Source code</a>
|
<a href="https://github.com/librespeed/speedtest">Source code</a>
|
||||||
|
|
|
@ -63,20 +63,22 @@ function I(id){return document.getElementById(id);}
|
||||||
#startStopBtn{
|
#startStopBtn{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
color:#6060AA;
|
|
||||||
background-color:rgba(0,0,0,0);
|
background-color:rgba(87, 28, 28, 0);
|
||||||
border:0.15em solid #6060FF;
|
border:0.15em solid #6060FF;
|
||||||
border-radius:0.3em;
|
border-radius:0.3em;
|
||||||
transition:all 0.3s;
|
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
width:8em; height:3em;
|
width:8em; height:3em;
|
||||||
line-height:2.7em;
|
line-height:2.7em;
|
||||||
|
|
||||||
|
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
#startStopBtn:hover{
|
|
||||||
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#startStopBtn.running{
|
#startStopBtn.running{
|
||||||
background-color:#FF3030;
|
background-color:#FF3030;
|
||||||
border-color:#FF6060;
|
border-color:#FF6060;
|
||||||
|
@ -88,6 +90,38 @@ function I(id){return document.getElementById(id);}
|
||||||
#startStopBtn.running:before{
|
#startStopBtn.running:before{
|
||||||
content:"Abort";
|
content:"Abort";
|
||||||
}
|
}
|
||||||
|
#startStopBtn:hover, .testArea:hover{
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#E7484F,
|
||||||
|
#E7484F 16.65%,
|
||||||
|
#F68B1D 16.65%,
|
||||||
|
#F68B1D 33.3%,
|
||||||
|
#FCED00 33.3%,
|
||||||
|
#FCED00 49.95%,
|
||||||
|
#009E4F 49.95%,
|
||||||
|
#009E4F 66.6%,
|
||||||
|
#00AAC3 66.6%,
|
||||||
|
#00AAC3 83.25%,
|
||||||
|
#732982 83.25%,
|
||||||
|
#732982 100%,
|
||||||
|
#E7484F 100%
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
animation:slidebg 2s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes slidebg {
|
||||||
|
to {
|
||||||
|
background-position:20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#test{
|
#test{
|
||||||
margin-top:2em;
|
margin-top:2em;
|
||||||
margin-bottom:12em;
|
margin-bottom:12em;
|
||||||
|
@ -98,6 +132,8 @@ function I(id){return document.getElementById(id);}
|
||||||
height:9em;
|
height:9em;
|
||||||
position:relative;
|
position:relative;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
|
border: 3px solid black;
|
||||||
|
|
||||||
}
|
}
|
||||||
div.testName{
|
div.testName{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
|
@ -135,6 +135,33 @@ function initUI(){
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
|
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
#startStopBtn:hover{
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#E7484F,
|
||||||
|
#E7484F 16.65%,
|
||||||
|
#F68B1D 16.65%,
|
||||||
|
#F68B1D 33.3%,
|
||||||
|
#FCED00 33.3%,
|
||||||
|
#FCED00 49.95%,
|
||||||
|
#009E4F 49.95%,
|
||||||
|
#009E4F 66.6%,
|
||||||
|
#00AAC3 66.6%,
|
||||||
|
#00AAC3 83.25%,
|
||||||
|
#732982 83.25%,
|
||||||
|
#732982 100%,
|
||||||
|
#E7484F 100%
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
animation:slidebg 2s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes slidebg {
|
||||||
|
to {
|
||||||
|
background-position:20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
#startStopBtn:hover{
|
#startStopBtn:hover{
|
||||||
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
|
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
|
@ -85,6 +85,33 @@ function I(id){return document.getElementById(id);}
|
||||||
#startStopBtn:before{
|
#startStopBtn:before{
|
||||||
content:"Start";
|
content:"Start";
|
||||||
}
|
}
|
||||||
|
#startStopBtn:hover, .testArea:hover{
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#E7484F,
|
||||||
|
#E7484F 16.65%,
|
||||||
|
#F68B1D 16.65%,
|
||||||
|
#F68B1D 33.3%,
|
||||||
|
#FCED00 33.3%,
|
||||||
|
#FCED00 49.95%,
|
||||||
|
#009E4F 49.95%,
|
||||||
|
#009E4F 66.6%,
|
||||||
|
#00AAC3 66.6%,
|
||||||
|
#00AAC3 83.25%,
|
||||||
|
#732982 83.25%,
|
||||||
|
#732982 100%,
|
||||||
|
#E7484F 100%
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
animation:slidebg 2s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes slidebg {
|
||||||
|
to {
|
||||||
|
background-position:20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
#startStopBtn.running:before{
|
#startStopBtn.running:before{
|
||||||
content:"Abort";
|
content:"Abort";
|
||||||
}
|
}
|
||||||
|
|
|
@ -94,6 +94,33 @@ function I(id){return document.getElementById(id);}
|
||||||
margin-top:2em;
|
margin-top:2em;
|
||||||
margin-bottom:12em;
|
margin-bottom:12em;
|
||||||
}
|
}
|
||||||
|
#startStopBtn:hover, .testArea:hover{
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#E7484F,
|
||||||
|
#E7484F 16.65%,
|
||||||
|
#F68B1D 16.65%,
|
||||||
|
#F68B1D 33.3%,
|
||||||
|
#FCED00 33.3%,
|
||||||
|
#FCED00 49.95%,
|
||||||
|
#009E4F 49.95%,
|
||||||
|
#009E4F 66.6%,
|
||||||
|
#00AAC3 66.6%,
|
||||||
|
#00AAC3 83.25%,
|
||||||
|
#732982 83.25%,
|
||||||
|
#732982 100%,
|
||||||
|
#E7484F 100%
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
animation:slidebg 2s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes slidebg {
|
||||||
|
to {
|
||||||
|
background-position:20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
div.testArea{
|
div.testArea{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
width:14em;
|
width:14em;
|
||||||
|
|
Loading…
Reference in a new issue