قرار دادن حالت حرکتی زیبا برای متن
در این مطلب قصد دارم یک حالت زیبا برای اعمال کردن به متن در اختیارتون قرار بدم ، این حالت شبیه تیک زدن و یا مثل لامپی که خاموش روشن میشه و درست کار نمیکنه هست ، میشه گفت مثل متنی که نویز (noise) داره. نمونه را در ادامه مشاهده کنید.
بر روی عکس بالا کلیک کنید و دموی این کد را مشاهده کنید.
کد های زیر مربوط به این مطلب می باشد ، می توانید از آن استفاده کنید :
کد HTML :
1 |
<div class="glitch" data-text="Sadegh">Sadegh</div> |
کدهای CSS :
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 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
body { background: black; font-family: sans-serif; } .glitch { color: white; font-size: 100px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim { 0% { clip: rect(54px, 9999px, 60px, 0); } 5% { clip: rect(28px, 9999px, 45px, 0); } 10% { clip: rect(67px, 9999px, 29px, 0); } 15.0% { clip: rect(73px, 9999px, 60px, 0); } 20% { clip: rect(10px, 9999px, 56px, 0); } 25% { clip: rect(37px, 9999px, 8px, 0); } 30.0% { clip: rect(3px, 9999px, 7px, 0); } 35% { clip: rect(80px, 9999px, 18px, 0); } 40% { clip: rect(13px, 9999px, 98px, 0); } 45% { clip: rect(82px, 9999px, 58px, 0); } 50% { clip: rect(85px, 9999px, 92px, 0); } 55.0% { clip: rect(64px, 9999px, 44px, 0); } 60.0% { clip: rect(82px, 9999px, 63px, 0); } 65% { clip: rect(23px, 9999px, 28px, 0); } 70% { clip: rect(47px, 9999px, 74px, 0); } 75% { clip: rect(99px, 9999px, 68px, 0); } 80% { clip: rect(42px, 9999px, 68px, 0); } 85.0% { clip: rect(3px, 9999px, 93px, 0); } 90% { clip: rect(15px, 9999px, 5px, 0); } 95% { clip: rect(78px, 9999px, 85px, 0); } 100% { clip: rect(84px, 9999px, 28px, 0); } } .glitch:after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 red; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim 2s infinite linear alternate-reverse; } @keyframes noise-anim-2 { 0% { clip: rect(84px, 9999px, 100px, 0); } 5% { clip: rect(92px, 9999px, 52px, 0); } 10% { clip: rect(31px, 9999px, 97px, 0); } 15.0% { clip: rect(68px, 9999px, 9px, 0); } 20% { clip: rect(79px, 9999px, 69px, 0); } 25% { clip: rect(67px, 9999px, 51px, 0); } 30.0% { clip: rect(60px, 9999px, 93px, 0); } 35% { clip: rect(93px, 9999px, 54px, 0); } 40% { clip: rect(63px, 9999px, 1px, 0); } 45% { clip: rect(93px, 9999px, 92px, 0); } 50% { clip: rect(40px, 9999px, 77px, 0); } 55.0% { clip: rect(32px, 9999px, 61px, 0); } 60.0% { clip: rect(6px, 9999px, 100px, 0); } 65% { clip: rect(81px, 9999px, 26px, 0); } 70% { clip: rect(44px, 9999px, 67px, 0); } 75% { clip: rect(30px, 9999px, 58px, 0); } 80% { clip: rect(64px, 9999px, 43px, 0); } 85.0% { clip: rect(16px, 9999px, 94px, 0); } 90% { clip: rect(58px, 9999px, 25px, 0); } 95% { clip: rect(41px, 9999px, 93px, 0); } 100% { clip: rect(8px, 9999px, 95px, 0); } } .glitch:before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim-2 3s infinite linear alternate-reverse; } |
توجه : در قسمت head صفحه باید فایل prefixfree.min.js که در آخر همین مطلب برای دانلود آماده کردم رو قرار بدید. این فایل کارش این هست که Vendor Prefix های مناسب هر مرورگر رو اتوماتیک قرار میده.
برای مطالعه و مثالهای بیشتر میتونین به این لینک مراجعه کنید. امیدوارم لذت برده باشید.
نوشته شده در مارس 1, 2016 / 3,228 نمایش / کد مطلب : 13346
حیف که css هاش زیاده اما خیلی قشنگه!
بیگ لایک!
دستتون درد نکنه