کدهای جذاب و دیدنی ( little box-shadow animation ) : ساخت لودر با استفاده از سایه

body {

padding:0;

margin:0;

background:#52534F;

}

.load {

width:15px;

height:15px;

background:rgba(0,0,0,0);

border-radius:50%;

margin:100px auto;

-webkit-animation:load 3s ease-in-out infinite;

animation:load 3s ease-in-out infinite;

}

@-webkit-keyframes load {

0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #fff;}

50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

83% {box-shadow:15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #fff;}

100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

}

@keyframes load {

0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #fff;}

50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

83% {box-shadow:15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #fff;}

100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

}

سون لرن • آموزش...