لود کردن یک دستور css اتوماتیک (اساتید لطفا)

سلام اساتید متحرم . من می خوام یه استایلی که واسه یه عکس تعریف کردم مثلا 360 درجه بچرخه . حالا می خوام طوری تعریف کنم که هنگام بالا اومدن سایت اون عکس شروع به حرکت یا چرخش کنه . در واقع یه لوگو می خوام طراحی کنم که پشت سر هم برچه . مرسی اگه راهنمایی کنین

با CSS3 میتونی درست کنی:
ابتدا برای لوگوت کلاس زیر رو تعیین کن:

.logo
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

بعد کد زیر رو پایین کلاس بالا کپی کن:

@keyframes mymove
{
from { transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }
to { transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }
}

@-moz-keyframes mymove /* Firefox */
{
from { -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
to { -moz-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
to { -webkit-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
}

@-o-keyframes mymove /* Opera */
{
from { -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
to { -o-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);}
}

وردپرس فارسی

انجمن

لود کردن یک دستور css اتوماتیک (اساتید لطفا) (۲ نوشته)

درباره‌ی این موضوع

برچسب‌ها