You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.2 KiB
128 lines
2.2 KiB
/* Rotation */
|
|
|
|
.rotating::before{
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 25px);
|
|
left: calc(50% - 25px);
|
|
height: 50px;
|
|
width: 50px;
|
|
background-image: linear-gradient(to bottom,black 50%, white 50%);
|
|
border-radius: 50%;
|
|
animation: rotate 1s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.rotating::after{
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 20px);
|
|
left: calc(50% - 20px);
|
|
height: 40px;
|
|
width: 40px;
|
|
background-color: #020202;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Blinking */
|
|
|
|
.blinking::after{
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 25px);
|
|
left: calc(50% - 25px);
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 50%;
|
|
background-color:#fff;
|
|
animation: blink 2000ms ease infinite;
|
|
}
|
|
|
|
.blinking-2::after{
|
|
background-color: transparent;
|
|
border: 2px solid white;
|
|
transform: scale(0);
|
|
animation: blink-2 2000ms ease-out infinite,blink-2a 2s ease-out infinite;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.bounce::after{
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 50px);
|
|
left: calc(50% - 25px);
|
|
height: 50px;
|
|
width: 50px;
|
|
box-sizing: border-box;
|
|
background-image: linear-gradient(to bottom,rgb(255, 255, 255) 60%, rgb(235, 235, 235) 80%, rgb(210, 210, 210));
|
|
border-radius: 50%;
|
|
animation: bounce 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.ring:after {
|
|
content: " ";
|
|
display: block;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 8px;
|
|
border-radius: 50%;
|
|
border: 6px solid #fff;
|
|
border-color: #fff transparent #fff transparent;
|
|
animation: ring 1.2s linear infinite;
|
|
}
|
|
|
|
|
|
/* Key frames */
|
|
|
|
@keyframes rotate{
|
|
from{
|
|
transform: rotate(0deg);
|
|
}
|
|
to{
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes blink{
|
|
0%{
|
|
transform: scale(1);
|
|
}
|
|
50%{
|
|
transform: scale(1.5);
|
|
}
|
|
100%{
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes blink-2{
|
|
0%{
|
|
transform: scale(0.2);
|
|
}
|
|
100%{
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce{
|
|
0%,100%{
|
|
transform: translateY(0);
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
50%{
|
|
transform: translateY(50px);
|
|
height: 45px;
|
|
width: 55px;
|
|
}
|
|
}
|
|
|
|
@keyframes ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|