按扭样式
.buttonStyle{
height: 27px;
width: 80px;
border: 0;
background-color:#6C6C6C;
box-shadow:0 0 1px #272727,
0 0 10px 2px #3C3C3C,
0 0 10px 4px #4F4F4F;
border-radius: 4px;
font-family: Calibri;
font-weight: 800;
font-style: italic;
color: aqua;
cursor: pointer;
}
.buttonStyle:hover{
animation: buttonEffect 0.4s linear;
transition-timing-function: linear;
}
.buttonStyle:active{
transform: scale(1.2);
bottom: -3px;
transition-timing-function: ease-in-out;
}
@keyframes buttonEffect {
0%{background: radial-gradient(ellipse 20px 8px,white,black,black);}
20%{background: radial-gradient(ellipse 30px 12px,white,black,black);}
40%{background: radial-gradient(ellipse 40px 16px,white,black,black);}
60%{background: radial-gradient(ellipse 50px 20px,white,black,black);}
80%{background: radial-gradient(ellipse 60px 24px,white,black,black);}
100%{background: radial-gradient(ellipse 70px 280px,white,black,black);}
}
文本输入框样式
.inputStyle{
width: 200px;
height: 30px;
background-color:#4F4F4F;
border-radius: 8px;
border-width: 5px 5px 5px 5px;
border-style: inset;
border-color: black;
font-family: "Droid Sans Mono Slashed";
font-weight: 300;
font-style: italic;
color: aqua;}
.inputStyle:focus{
background-color:black;
}
.inputStyle:hover{
animation: inputEffect 0.8s linear;
transition-timing-function: linear;
}
@keyframes inputEffect {
0%{border-top-color: aqua;
background: linear-gradient(to right,aqua,black 20%)}
25%{border-right-color: aqua;
background: linear-gradient(to right,aqua,black 40%)}
50%{border-bottom-color: aqua;
background: linear-gradient(to right,aqua,black 60%)}
75%{border-left-color: aqua;
background: linear-gradient(to right,aqua,black 80%)}
100%{border-color: cyan;
background: linear-gradient(to right,aqua,black 100%)}
}