Skip to content

Commit 3fdab97

Browse files
Vineeth T RVineeth T R
Vineeth T R
authored and
Vineeth T R
committed
work 26
1 parent 2cf1a84 commit 3fdab97

File tree

2 files changed

+436
-1
lines changed

2 files changed

+436
-1
lines changed

‎css/workshop.css

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1043,3 +1043,252 @@ body section:nth-child(2n + 1) {
10431043
transform: translate(0, -1em) rotate(-225deg);
10441044
}
10451045
}
1046+
1047+
.md-22 .loader {
1048+
position: relative;
1049+
width: 48px;
1050+
height: 48px;
1051+
background: #de3500;
1052+
transform: perspective(200px) rotateX(65deg) rotate(45deg);
1053+
color: #fff;
1054+
animation: layers1 1s linear infinite alternate;
1055+
}
1056+
1057+
.md-22 .loader:after {
1058+
content: '';
1059+
position: absolute;
1060+
inset: 0;
1061+
background: rgba(255, 255, 255, 0.7);
1062+
animation: layers2 1s linear infinite alternate;
1063+
}
1064+
1065+
@keyframes layers1 {
1066+
0% {
1067+
box-shadow: 0px 0px 0 0px;
1068+
}
1069+
90%, 100% {
1070+
box-shadow: 20px 20px 0 -4px;
1071+
}
1072+
}
1073+
1074+
@keyframes layers2 {
1075+
0% {
1076+
transform: translate(0, 0) scale(1);
1077+
}
1078+
90%, 100% {
1079+
transform: translate(-25px, -25px) scale(1.2);
1080+
}
1081+
}
1082+
1083+
.md-23 .loader {
1084+
position: relative;
1085+
height: 40px;
1086+
width: 6px;
1087+
color: #FFF;
1088+
animation: paddles 0.75s ease-out infinite;
1089+
}
1090+
1091+
.md-23 .loader:before {
1092+
content: "";
1093+
position: absolute;
1094+
margin: 0 auto;
1095+
left: 0;
1096+
right: 0;
1097+
top: 15px;
1098+
width: 12px;
1099+
height: 12px;
1100+
background-color: #de3500;
1101+
border-radius: 50%;
1102+
animation: ballbounce 0.6s ease-out infinite;
1103+
}
1104+
1105+
@keyframes paddles {
1106+
0% {
1107+
box-shadow: -25px -10px, 25px 10px;
1108+
}
1109+
50% {
1110+
box-shadow: -25px 8px, 25px -10px;
1111+
}
1112+
100% {
1113+
box-shadow: -25px -10px, 25px 10px;
1114+
}
1115+
}
1116+
1117+
@keyframes ballbounce {
1118+
0% {
1119+
transform: translateX(-20px) scale(1, 1.2);
1120+
}
1121+
25% {
1122+
transform: scale(1.2, 1);
1123+
}
1124+
50% {
1125+
transform: translateX(15px) scale(1, 1.2);
1126+
}
1127+
75% {
1128+
transform: scale(1.2, 1);
1129+
}
1130+
100% {
1131+
transform: translateX(-20px);
1132+
}
1133+
}
1134+
1135+
.md-24 .loader {
1136+
position: relative;
1137+
width: 75px;
1138+
height: 100px;
1139+
background-repeat: no-repeat;
1140+
background-image: linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0);
1141+
background-size: 8px 100%;
1142+
background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
1143+
animation: pillerPushUp 4s linear infinite;
1144+
}
1145+
1146+
.md-24 .loader:after {
1147+
content: '';
1148+
position: absolute;
1149+
bottom: 10px;
1150+
left: 0;
1151+
width: 10px;
1152+
height: 10px;
1153+
background: #de3500;
1154+
border-radius: 50%;
1155+
animation: ballStepUp 4s linear infinite;
1156+
}
1157+
1158+
@keyframes pillerPushUp {
1159+
0%, 40%, 100% {
1160+
background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
1161+
}
1162+
50%, 90% {
1163+
background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px;
1164+
}
1165+
}
1166+
1167+
@keyframes ballStepUp {
1168+
0% {
1169+
transform: translate(0, 0);
1170+
}
1171+
5% {
1172+
transform: translate(8px, -14px);
1173+
}
1174+
10% {
1175+
transform: translate(15px, -10px);
1176+
}
1177+
17% {
1178+
transform: translate(23px, -24px);
1179+
}
1180+
20% {
1181+
transform: translate(30px, -20px);
1182+
}
1183+
27% {
1184+
transform: translate(38px, -34px);
1185+
}
1186+
30% {
1187+
transform: translate(45px, -30px);
1188+
}
1189+
37% {
1190+
transform: translate(53px, -44px);
1191+
}
1192+
40% {
1193+
transform: translate(60px, -40px);
1194+
}
1195+
50% {
1196+
transform: translate(60px, 0);
1197+
}
1198+
57% {
1199+
transform: translate(53px, -14px);
1200+
}
1201+
60% {
1202+
transform: translate(45px, -10px);
1203+
}
1204+
67% {
1205+
transform: translate(37px, -24px);
1206+
}
1207+
70% {
1208+
transform: translate(30px, -20px);
1209+
}
1210+
77% {
1211+
transform: translate(22px, -34px);
1212+
}
1213+
80% {
1214+
transform: translate(15px, -30px);
1215+
}
1216+
87% {
1217+
transform: translate(7px, -44px);
1218+
}
1219+
90% {
1220+
transform: translate(0, -40px);
1221+
}
1222+
100% {
1223+
transform: translate(0, 0);
1224+
}
1225+
}
1226+
1227+
.md-25 .loader {
1228+
position: relative;
1229+
width: 85px;
1230+
height: 50px;
1231+
background-repeat: no-repeat;
1232+
background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0);
1233+
background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
1234+
animation: rikSpikeRoll 0.65s linear infinite alternate;
1235+
}
1236+
1237+
@keyframes rikSpikeRoll {
1238+
0% {
1239+
background-size: 10px 3px;
1240+
}
1241+
16% {
1242+
background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px;
1243+
}
1244+
33% {
1245+
background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px;
1246+
}
1247+
50% {
1248+
background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px;
1249+
}
1250+
66% {
1251+
background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px;
1252+
}
1253+
83% {
1254+
background-size: 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px;
1255+
}
1256+
100% {
1257+
background-size: 10px 3px, 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px;
1258+
}
1259+
}
1260+
1261+
.md-26 .loader {
1262+
position: relative;
1263+
width: 55px;
1264+
height: 55px;
1265+
background-repeat: no-repeat;
1266+
background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0);
1267+
background-size: 5px 40px;
1268+
background-position: 0px center, 10px center, 20px center, 30px center, 40px center, 50px center;
1269+
animation: spikeUp 1s linear infinite alternate;
1270+
}
1271+
1272+
@keyframes spikeUp {
1273+
0% {
1274+
background-size: 5px 40px;
1275+
}
1276+
16% {
1277+
background-size: 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px;
1278+
}
1279+
33% {
1280+
background-size: 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px;
1281+
}
1282+
50% {
1283+
background-size: 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px;
1284+
}
1285+
66% {
1286+
background-size: 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px;
1287+
}
1288+
83% {
1289+
background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px;
1290+
}
1291+
100% {
1292+
background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px;
1293+
}
1294+
}

0 commit comments

Comments
 (0)