|
/* random css stuff */
|
|
|
|
|
|
/* dark green zig zag background */
|
|
|
|
body {
|
|
|
|
background:
|
|
linear-gradient(135deg, #0d0d0c 25%, transparent 25%) -50px 0,
|
|
linear-gradient(225deg, #0d0d0c 25%, transparent 25%) -50px 0,
|
|
linear-gradient(315deg, #0d0d0c 25%, transparent 25%),
|
|
linear-gradient(45deg, #0d0d0c 25%, transparent 25%);
|
|
background-size: 100px 100px;
|
|
background-color: #0b1200 ;
|
|
|
|
}
|
|
|
|
/* dark green & black stripes background */
|
|
|
|
body {
|
|
background-color: #000;
|
|
background-image: linear-gradient(transparent 50%, rgb(0, 20, 0) 50%);
|
|
background-size: 50px 50px;
|
|
}
|
|
|
|
|
|
|
|
/* green button */
|
|
|
|
.button {
|
|
background-color: #003300;
|
|
border: 1px solid#006400;
|
|
color: lime;
|
|
padding: 4px 4px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 15px;
|
|
margin: 2px 2px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
|
|
}.button:hover {
|
|
background-color: #3e8e41;
|
|
border-radius: 2px;
|
|
color: red;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* hr yellow dash */
|
|
.ydash {
|
|
border-top: 4px dashed yellow;
|
|
border-radius: 2px;
|
|
width: 80%;
|
|
}
|
|
|
|
|
|
/* trippy */
|
|
|
|
|
|
.trippy {
|
|
animation-name: animate-trippy;
|
|
animation-duration: 5s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate
|
|
}
|
|
|
|
@keyframes animate-trippy {
|
|
0% {
|
|
filter: hue-rotate(0deg) saturate(3);
|
|
}
|
|
80% {
|
|
filter: hue-rotate(360deg) saturate(2);
|
|
}
|
|
}
|
|
|
|
/* rotate */
|
|
|
|
.rotate {
|
|
animation: rotation 2s infinite linear;
|
|
}
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
|
|
/* zoom */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.zoom {
|
|
padding: 0;
|
|
background-color: none;
|
|
transition: transform .2s;
|
|
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.zoom:hover {
|
|
-ms-transform: scale(2.0); /* IE 9 */
|
|
-webkit-transform: scale(2.0); /* Safari 3-8 */
|
|
transform: scale(2.0);
|
|
}
|
|
|
|
/* spinning */
|
|
|
|
|
|
@keyframes spinning {
|
|
from { transform: rotate(0deg) }
|
|
to { transform: rotate(360deg) }
|
|
}
|
|
.spinhov:hover {
|
|
animation-name: spinning;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: 1;
|
|
/* linear | ease | ease-in | ease-out | ease-in-out */
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.spin {
|
|
animation-name: spinning;
|
|
animation-duration: 5s;
|
|
animation-iteration-count: infinite;
|
|
/* linear | ease | ease-in | ease-out | ease-in-out */
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
/* spin3D */
|
|
|
|
@keyframes spin3D {
|
|
from { transform: rotateY(0deg) }
|
|
to { transform: rotateY(360deg) }
|
|
}
|
|
.spinhov3D:hover {
|
|
animation-name: spin3D;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: 1;
|
|
/* linear | ease | ease-in | ease-out | ease-in-out */
|
|
animation-timing-function: ease-in-out;
|
|
} |