رفتن به مطلب

درخواست برای کد انیمیشن در css3


nima

پست های پیشنهاد شده

سلام دوستان بنده عکس ماشین دارم داخل صفحه م میخوام با css وقتی موس روی این عکس قرار میگیره ماشین از سمت چپ از صفحه بره بیرون و از سمت راست دوباره برگرده سرجای خودش قرار بگیره

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

عزیز اگه آشنایی دارین توضیح می دم البته راهنمایی

اول یه دایو نگهداره بسازید با position غیر از static و ارتفاع و عرض مشخص، overflow رو hidden کنید تا بتونیم شئ‌مون رو مخفی کنیم.

حالا شئ‌مون رو poistion absolute می دیم از یه نقطه اولیه خاص.

 

اما animation

@keyframes رو بسازید. در مرحله ۰٪ ماشین، با transform translateX برابر ۰ روبرو میشه، حالا مرحله ۷۰٪ باید درصد translateX رو جوری تغییر بدین که از صفحه خارج  بشه، حالا دقیقا روی ۷۱٪ هر چی به translateX دادیم رو منفیش می کنیم که اونور قرار بگیره و در نهایت توی ۱۰۰٪ بیاد روی translateX برابر ۰

بعدشم hover,...

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 36 دقیقه قبل، laruz گفته است :

عزیز اگه آشنایی دارین توضیح می دم البته راهنمایی

اول یه دایو نگهداره بسازید با position غیر از static و ارتفاع و عرض مشخص، overflow رو hidden کنید تا بتونیم شئ‌مون رو مخفی کنیم.

حالا شئ‌مون رو poistion absolute می دیم از یه نقطه اولیه خاص.

 

اما animation

@keyframes رو بسازید. در مرحله ۰٪ ماشین، با transform translateX برابر ۰ روبرو میشه، حالا مرحله ۷۰٪ باید درصد translateX رو جوری تغییر بدین که از صفحه خارج  بشه، حالا دقیقا روی ۷۱٪ هر چی به translateX دادیم رو منفیش می کنیم که اونور قرار بگیره و در نهایت توی ۱۰۰٪ بیاد روی translateX برابر ۰

بعدشم hover,...

خیلی ممنون میشه کدش رو قرار بدید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

کد html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>

<body>
<div class="p2g">
<div class="plus2">فروم بیست اسکریپت</div>
</div>
</body>

</html>

کد css

.p2g{
width:500px;
height:80px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: "B Yekan",Arial, Helvetica, Sans-Serif;
padding:0;
border:2px #414141 dashed;
box-shadow:1px 1px 10px 1px #414141 inset;
margin:5px;
overflow:hidden;
}
.p2g:hover{
background:#ff0048;
}
.p2g .plus2{
padding:5px;
font-size:15px;
color:#000;
text-shadow:2px 2px 1px #ffffff;
background:#cdcdcd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:260px;
height:25px;
display:block;
text-align:center;
margin:10px 10px 0 0px;
transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}
.p2g:hover .plus2{
margin:10px -280px 0 0px;
}

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...