رفتن به مطلب

درخواست کد css افکت متن


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

سلام

من یه کدی میخواستم که به وسیله اون بشه یه متن رو توی یه جبعه به حرکت در آورد

البته با افکتی جالب، نه اینکه فقط از یک طرف به طرف دیگه بره

مثلا اینکه سرجاش تکون بخوره

یا اینکه وقتی موس میره روش یه تکونی بخوره

ممنون

لینک به ارسال

این یک نمونه است با غلو بالا که کاملا لمس بشه


.divanim:hover
{
width:auto;
height:16px;
position:absolute;
left:100px;
color:#CC0000;
font-size:80px;
text-align:left;
letter-spacing:-.2em;
font-weight:bold;
animation-name:mymove;
animation-duration:.2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mymove;
-moz-animation-duration:.2s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mymove;
-webkit-animation-duration:.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes mymove
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}

اصل کدها کاملا مشخصه و با دستکاری مقادیر می تونید هر چه را که خواستید اعمال کنید

لینک به ارسال

خب میشه کد htmlی رو بدید که من بتونم ازش استفاده کنم؟

الان خودم نمیدونم توی <body> چی باید بنویسم که این کد css خودش رو نشون بده

لینک به ارسال

خب میشه کد htmlی رو بدید که من بتونم ازش استفاده کنم؟

الان خودم نمیدونم توی <body> چی باید بنویسم که این کد css خودش رو نشون بده

باید از تگ div استفاده کنید و کلاس مورد نظر را برای استایل دادن فراخوانی کنید.


<div class="divanim">
</div>

لینک به ارسال

من الان این کد رو میزنم

اما چیزی نمیاد.



<!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" xml:lang="en" lang="en">

<head>
<title></title>

<script type="text/css">
.divanim:hover {
width:auto;
height:16px;
position:absolute;
left:100px;
color:#CC0000;
font-size:80px;
text-align:left;
letter-spacing:-.2em;
font-weight:bold;
animation-name:mymove;
animation-duration:.2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mymove;
-moz-animation-duration:.2s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mymove;
-webkit-animation-duration:.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes mymove
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}


</script>
</head>

<body>
<div class="divanim">

salam ?
</div>
</body>

</html>

ویرایش شده توسط mx10
لینک به ارسال

این نحوه تعریف استایل اشتباهه و باید یک فایل css ساخته و فراخوانی بشه و برای اینکه فقط خروجی را ببینید:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.divanim:hover {
width:auto;
height:16px;
position:absolute;
left:100px;
color:#CC0000;
font-size:80px;
text-align:left;
letter-spacing:-.2em;
font-weight:bold;
animation-name:mymove;
animation-duration:.2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mymove;
-moz-animation-duration:.2s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mymove;
-webkit-animation-duration:.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes mymove
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}

</style>
</head>
<body>
<div class="divanim">
salam
</div>
</body>
</html>

لینک به ارسال

لطفا این لینک رو ببینید.

http://liparis.ir/salam/

این که افکتی نداره

فقط وقتی موس میره روش ...

خودتون امتحان کنید.

لینک به ارسال

لطفا این لینک رو ببینید.

http://liparis.ir/salam/

این که افکتی نداره

فقط وقتی موس میره روش ...

خودتون امتحان کنید.

در گوگل جستجو کنید افکت های زیادی همراه با توضیح آموزش داده شده.

لینک به ارسال

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

اینها دستورات افکت گذاری هستند افکت ها با سلیقه و حوصله ی خودتون ساخته می شوند یا با کپی کردن نمونه های آماده که همونطور که دوستان هم گفتند باید با جستجو در گوگل بیابید (احتمالا این انتظار را ندارید که من یا دیگری برای کار شما این وقت رو بگذاره)

بهتره کمی زحمت بکشید و از سلیقه ی خودتون استفاده کنید و با تغییر اعداد تغییرات ایجاد شده را ببینید تا دستتون بیاد هر کدی چه عملی انجام می ده و بعد افکت مورد نظرتون رو بسازید

این کمی توهین آمیزه که شما چندین هفته و ماه است با منبعی به غنای این سایت برای مطالعه آشنایی اما برای وقت خود ارزشی می گذاری که حاضر نیستی صرف آموختن نیاز هات بشه و در عوض انتظار داری دیگران چندین برابر معمول برای مشکلاتت وقت بگذارند

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...