gol
gol

hardy

خسته شو گر مرهمی می‌بایدت

دم مزن گر همدمی می‌بایدت

تا در اثباتی تو بس نامحرمی

محو شو گر محرمی می‌بایدت
«عطار نیشابوری»

×

توجه : دو ارسال نخستِ کاربرانِ جدید در تالار میدوری , پیش از نمایش , نیاز به تایید مدیریت دارند.

Latest Threads  آخرین ارسال ها :
نمایش آخرین ارسال این موضوع
 
امتیاز موضوع:
  • 7 رأی - میانگین امیتازات : 3.14
  • 1
  • 2
  • 3
  • 4
  • 5
 
  
1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان
نویسنده:میدوری
آخرین ارسال:میدوری
پاسخ: 5
بازدید: 8266
subscription
quickreply advancequickreply report



( ابزار سایت ) افکت وزش باد با CSS
  نویسنده پیام  | تغییر اندازه ی متن:  zoomin zoomout default
admin میدوری profile  
آفلاین
مدیر کل تالار
مدالهای میدوری1000500
1001011720
168241051
دسترسی به میدوری
ارسال یک ایمیل به این کاربر ارسال یک پیام خصوصی به این کاربر مشاهده وب سایت کاربر یافتن تمامی ارسال های این کاربر اعتبار:
اطلاعات میدوری


تاریخ عضویت: 05 November 2011

ارسال ها: 1,732
شماره کاربری: 1
میزان اعتبار:

محل سکونت: تهران
ماه تولد:
جنسيت:
تماس با میدوری
حالت میدوری
صفحه های میدوری
گوگل پلاس فیس بوک توییتر یوتیوب کلوب
اینستاگرام تلگرام
ارسال: #1
Fish افکت وزش باد با CSS

rightarrow
افکت وزش باد با CSS
ایجاد و بازسازی وزش باد در تصویرها با استفاده از کدهای می تواند خالی از لطف نباشد . نمونه ی زنده را در زیر می توانید ببینید و در صورت علاقه مندی کدهای این افکت را برای بررسی و استفاده برای دوستان قرار داده ام . در این حالت وزش باد بازسازی شده که بعد از حرکت زمان مکث دارد و دوباره سیکل حرکت تکرار می شود . (تغییرات بعهده ی شماست)



کد 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" xml:lang="en">
<head>
  <title></title>
</head>
<style>
.swing{
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
}
@-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0); }
    5% { -webkit-transform: rotate(10deg); }
    10% { -webkit-transform: rotate(-9deg); }
    15% { -webkit-transform: rotate(8deg); }
    20% { -webkit-transform: rotate(-7deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(-5deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(-3deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes swinging{
    0% { -moz-transform: rotate(0); }
    5% { -moz-transform: rotate(10deg); }
    10% { -moz-transform: rotate(-9deg); }
    15% { -moz-transform: rotate(8deg); }
    20% { -moz-transform: rotate(-7deg); }
    25% { -moz-transform: rotate(6deg); }
    30% { -moz-transform: rotate(-5deg); }
    35% { -moz-transform: rotate(4deg); }
    40% { -moz-transform: rotate(-3deg); }
    45% { -moz-transform: rotate(2deg); }
    50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { -moz-transform: rotate(0); }
}
@keyframes swinging{
    0% { transform: rotate(0); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(-9deg); }
    15% { transform: rotate(8deg); }
    20% { transform: rotate(-7deg); }
    25% { transform: rotate(6deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    45% { transform: rotate(2deg); }
    50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
    100% { transform: rotate(0); }
}
</style>
<body> <br /><center>
<img class ="swing" src="winter.jpg" style="
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
    "
/>
<img class ="swing" src="winter.jpg" style="
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
    "
/></center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75





امضای میدوری :
[تصویر: mvd09b5.gif]
[تصویر: midori-sign-400.png]
محل حضور کاربر در تالار :  admin میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : help (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)

برچسب ها :

11 - June - 2014 38 : 08 PM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ
member pixell profile  
آفلاین
کاربر تالار
مدالهای pixell1
دسترسی به pixell
ارسال یک ایمیل به این کاربر ارسال یک پیام خصوصی به این کاربر یافتن تمامی ارسال های این کاربر اعتبار:
اطلاعات pixell


تاریخ عضویت: 27 July 2014

ارسال ها: 2
شماره کاربری: 1159
میزان اعتبار:
تماس با pixell
حالت pixell
صفحه های pixell

ارسال: #2
RE: افکت وزش باد با CSS

rightarrow
اگر میشود این کد لرزش عکس هم قرار دهید تشکر
ادرس کدی که در این سایت قرار دارد بروی تلفن

http://www.tax.gov.ir/entrance/35087.png

ادرس سایت = http://www.tax.gov.ir




محل حضور کاربر در تالار :  member pixell در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : help (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)

27 - July - 2014 20 : 10 AM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ
admin میدوری profile  
آفلاین
مدیر کل تالار
مدالهای میدوری1000500
1001011720
168241051
دسترسی به میدوری
ارسال یک ایمیل به این کاربر ارسال یک پیام خصوصی به این کاربر مشاهده وب سایت کاربر یافتن تمامی ارسال های این کاربر اعتبار:
اطلاعات میدوری


تاریخ عضویت: 05 November 2011

ارسال ها: 1,732
شماره کاربری: 1
میزان اعتبار:

محل سکونت: تهران
ماه تولد:
جنسيت:
تماس با میدوری
حالت میدوری
صفحه های میدوری
گوگل پلاس فیس بوک توییتر یوتیوب کلوب
اینستاگرام تلگرام
ارسال: #3
RE: افکت وزش باد با CSS

rightarrow
(27 - July - 2014 20 : 10 AM)pixell نوشته بوده :  اگر میشود این کد لرزش عکس هم قرار دهید تشکر
ادرس کدی که در این سایت قرار دارد بروی تلفن

http://www.tax.gov.ir/entrance/35087.png

ادرس سایت = http://www.tax.gov.ir
با درود
نخست اینکه در اینگونه موردها با خود صاحب سایت تماس بگیرید و در صورت رضایت صاحب سایت از کدهای ایشان استفاده کنید و دوم اینکه آدرسی که دادید از کدهای جاوا استفاده کرده و ممکن است در همه ی سایت ها بخوبی کار نکند . و آخر اینکه کدهای سی اس اس زیر را در اینجا آزمایش و در صورت پسند استفاده کنید . Cool
پیش از این کار اینجا را ببینید .

کد HTML:
<style>
.link-container a,
.shake-me {
    display:block;
    position:relative;
}
.link-container a:hover,
.shake-me:hover {
    -webkit-animation-name: linkQuake;
	   -moz-animation-name: linkQuake;
		  animation-name: linkQuake;
    -webkit-animation-duration: 0.8s;
	   -moz-animation-duration: 0.8s;
		  animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
	   -moz-transform-origin:50% 50%;
		  transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
	   -moz-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	   -moz-animation-timing-function: linear;
		  animation-timing-function: linear;
}

@keyframes linkQuake {
    0%   {
	   transform: translate(2px, 1px)   rotate(0deg);
    }
    10%  {
	   transform: translate(-1px, -2px) rotate(-1deg);
    }
    20%  {
	   transform: translate(-3px, 0px)  rotate(1deg);
    }
    30%  {
	   transform: translate(0px, 2px)   rotate(0deg);
    }
    40%  {
	   transform: translate(1px, -1px)  rotate(1deg);
    }
    50%  {
	   transform: translate(-1px, 1px)  rotate(-1deg);
    }
    60%  {
	   transform: translate(-3px, -2px)  rotate(0deg);
    }
    70%  {
	   transform: translate(2px, 1px)   rotate(-1deg);
    }
    80%  {
	   transform: translate(-1px, -2px) rotate(1deg);
    }
    90%  {
	   transform: translate(2px, -1px)   rotate(0deg);
    }
    100% {
	   transform: translate(1px, -2px)  rotate(-1deg);
    }
}

@-moz-keyframes linkQuake { /* Firefox */
    0%   {
	   -moz-transform: translate(2px, 1px)   rotate(0deg);
    }
    10%  {
	   -moz-transform: translate(-1px, -2px) rotate(-1deg);
    }
    20%  {
	   -moz-transform: translate(-3px, 0px)  rotate(1deg);
    }
    30%  {
	   -moz-transform: translate(0px, 2px)   rotate(0deg);
    }
    40%  {
	   -moz-transform: translate(1px, -1px)  rotate(1deg);
    }
    50%  {
	   -moz-transform: translate(-1px, 1px)  rotate(-1deg);
    }
    60%  {
	   -moz-transform: translate(-3px, -2px)  rotate(0deg);
    }
    70%  {
	   -moz-transform: translate(2px, 1px)   rotate(-1deg);
    }
    80%  {
	   -moz-transform: translate(-1px, -2px) rotate(1deg);
    }
    90%  {
	   -moz-transform: translate(2px, -1px)   rotate(0deg);
    }
    100% {
	   -moz-transform: translate(1px, -2px)  rotate(-1deg);
    }
}

@-webkit-keyframes linkQuake { /* Safari and Chrome */
    0%   {
	   -webkit-transform: translate(2px, 1px)   rotate(0deg);
    }
    10%  {
	   -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }
    20%  {
	   -webkit-transform: translate(-3px, 0px)  rotate(1deg);
    }
    30%  {
	   -webkit-transform: translate(0px, 2px)   rotate(0deg);
    }
    40%  {
	   -webkit-transform: translate(1px, -1px)  rotate(1deg);
    }
    50%  {
	   -webkit-transform: translate(-1px, 1px)  rotate(-1deg);
    }
    60%  {
	   -webkit-transform: translate(-3px, -2px)  rotate(0deg);
    }
    70%  {
	   -webkit-transform: translate(2px, 1px)   rotate(-1deg);
    }
    80%  {
	   -webkit-transform: translate(-1px, -2px) rotate(1deg);
    }
    90%  {
	   -webkit-transform: translate(2px, -1px)   rotate(0deg);
    }
    100% {
	   -webkit-transform: translate(1px, -2px)  rotate(-1deg);
    }
}
</style>
<h1>لرزش تصوير و نوشته</h1>
<div class ="link-container">
<a href="#!"><h1 class ="shake-me">لرزش تصوير يا نوشته</h1></a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137





امضای میدوری :
[تصویر: mvd09b5.gif]
[تصویر: midori-sign-400.png]
( آخرین ویرایش در این ارسال: 27 - July - 2014 10 : 12 PM، توسط : میدوری .::. دلیل ویرایش: )
محل حضور کاربر در تالار :  admin میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : help (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)

27 - July - 2014 14 : 11 AM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ


subscription
quickreply advancequickreply report

موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
Subarrow abzar افکت لرزش تصویر با CSS3 میدوری 0 2,446 29 - January - 2014 15 : 02 PM
آخرین ارسال: میدوری
Heart abzar ده افکت تصویری با CSS3 میدوری 0 812 28 - December - 2013 18 : 01 PM
آخرین ارسال: میدوری

بازديدکنندگان از موضوع
کاربرانی که از موضوع بازدید کرده اند ( 13 ) کاربر

ابزار موضوع



1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان