کد های لودینگ زیبا با css (سری دوم)

          admin 
            بازدید : 260
          شنبه 14 تیر 1393
           نظرات (0)
        

سلام امروز با دومین سری از کدهای لودینگ تنها با استفاده از css در خدمت شما هستیم در این سری کد لودینگ ویندوز 8 نیز برای شما آماده شده برای مشاهده کد ها به ادامه مطلب رجوع کنید

کد لودینگ ویندوز 8

کد html

کد css

.windows-8 {
    position: relative;
    width: 90px;
    height:90px;
}
.windows-8 .ball {
    position: absolute;
    width: 86px;
    height: 86px;
    opacity: 0;
    -moz-transform: rotate(225deg);
    -moz-animation: orbit 7.15s infinite;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 7.15s infinite;
    transform: rotate(225deg);
    animation: orbit 7.15s infinite;
}
.windows-8 .ball .inner-ball{
    position: absolute;
    width: 11px;
    height: 11px;
    background: #C5F4EB;
    left:0px;
    top:0px;
    border-radius: 11px;
}
.windows-8 #ball_1 {
    -moz-animation-delay: 1.56s;
    -webkit-animation-delay: 1.56s;
    animation-delay: 1.56s;
}
.windows-8 #ball_2 {
    -moz-animation-delay: 0.31s;
    -webkit-animation-delay: 0.31s;
    animation-delay: 0.31s;
}
.windows-8 #ball_3 {
    -moz-animation-delay: 0.62s;
    -webkit-animation-delay: 0.62s;
    animation-delay: 0.62s;
}
.windows-8 #ball_4 {
    -moz-animation-delay: 0.94s;
    -webkit-animation-delay: 0.94s;
    animation-delay: 0.94s;
}
.windows-8 #ball_5 {
    -moz-animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
@-webkit-keyframes orbit {
    0% { opacity: 1; z-index:99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; }
    7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; origin:0%; }
    30% { opacity: 1; -webkit-transform:rotate(410deg); -webkit-animation-timing-function: ease-in-out; origin:7%; }
    39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; origin:30%; }
    70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; origin:39%; }
    75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; origin:70%; }
    76% { opacity: 0; -webkit-transform: rotate(900deg); }
    100% { opacity: 0; -webkit-transform: rotate(900deg); }
}
@-moz-keyframes orbit {
    0% { opacity: 1; z-index:99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; }
    7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; origin:0%; }
    30% { opacity: 1; -moz-transform:rotate(410deg); -moz-animation-timing-function: ease-in-out; origin:7%; }
    39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; origin:30%; }
    70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; origin:39%; }
    75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; origin:70%; }
    76% { opacity: 0; -moz-transform: rotate(900deg); }
    100% { opacity: 0; -moz-transform: rotate(900deg); }
}
@keyframes orbit {
    0% { opacity: 1; z-index:99; transform: rotate(180deg); animation-timing-function: ease-out; }
    7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; origin:0%; }
    30% { opacity: 1; transform:rotate(410deg); animation-timing-function: ease-in-out; origin:7%; }
    39% { opacity: 1; transform: rotate(645deg); animation-timing-function: linear; origin:30%; }
    70% { opacity: 1; transform: rotate(770deg); animation-timing-function: ease-out; origin:39%; }
    75% { opacity: 1; transform: rotate(900deg); animation-timing-function: ease-out; origin:70%; }
    76% { opacity: 0; transform: rotate(900deg); }
    100% { opacity: 0; transform: rotate(900deg); }
}

دمو

کد لودینگ شماره2

کد html

کد css

#floating-circles {
    position:relative;
    width:128px;
    height:128px;
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    transform:scale(0.6);
}
.circle {
    position: absolute;
    background-color: #FFFFFF;
    height: 23px;
    width: 23px;
    border-radius: 12px;
    -webkit-animation: fade 1.04s linear infinite;
    -moz-animation: fade 1.04s linear infinite;
    animation: fade 1.04s linear infinite;
}
#rotate_1 {
    left:0;
    top:52px;
    -moz-animation-delay: 0.39s;
    -webkit-animation-delay: 0.39s;
    animation-delay: 0.39s;
}
#rotate_2 {
    left:15px;
    top:15px;
    -moz-animation-delay: 0.52s;
    -webkit-animation-delay: 0.52s;
    animation-delay: 0.52s;
}
#rotate_3 {
    left:52px;
    top:0;
    -moz-animation-delay: 0.65s;
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}
#rotate_4 {
    right:15px;
    top:15px;
    -moz-animation-delay: 0.78s;
    -webkit-animation-delay: 0.78s;
    animation-delay: 0.78s;
}
#rotate_5 {
    right:0;
    top:52px;
    -moz-animation-delay: 0.91s;
    -webkit-animation-delay: 0.91s;
    animation-delay: 0.91s;
}
#rotate_6 {
    right: 15px;
    bottom: 15px;
    -moz-animation-delay: 1.04s;
    -webkit-animation-delay: 1.04s;
    animation-delay: 1.04s;
}
#rotate_7 {
    left: 52px;
    bottom: 0;
    -moz-animation-delay: 1.17s;
    -webkit-animation-delay: 1.17s;
    animation-delay: 1.17s;
}
#rotate_8 {
    left: 15px;
    bottom: 15px;
    -moz-animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
@-webkit-keyframes fade {
    0%{ background-color: #C5F4EB }
    100%{ background-color: #FFFFFF }
}
@-moz-keyframes fade {
    0%{ background-color: #C5F4EB }
    100%{ background-color: #FFFFFF }
}
@keyframes fade {
    0%{ background-color: #C5F4EB }
    100%{ background-color: #FFFFFF }
}

دمو

منبع : نایس اسکین

کپی برداری با ذکر منبع و لینک مجاز است

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
بهترین فایل robots.txt برای رزبلاگ	5	372	physics-samane
درآمد روزانه 50 دلار !	0	163	administrator
لطفان یکی قالب باکس فیلم هدر شو برام عوض کنه و بگ پشت سایت	0	157	ehsan125
درخواست کمک	0	178	mahyar
پخش کننده	3	337	savaaegh

کد و ابزار مفید

ابزار وبمستر

قالب

کد های کاربردی

سی اس اس (css)

جاوا اسکریپت

آموزش

آموزش های کاربردی

گرافیک مربوط به وب

بنر های آماده

آیکون/ استوک / وکتور

بنر لایه باز

هدر لایه باز

لایه بازهای طراحی وب

بکگراند قالب

لوگوی لایه باز

آواتارهای کاربری

کاور مطالب

وردپرس

افزونه وردپرس

آموزش های وردپرسی

کد های لودینگ زیبا با css (سری دوم)

کد لودینگ ویندوز 8

کد لودینگ شماره2