Smiley face

عنوان : نمايش صفحه خطا بصورت انيميشن با CSS

1396/11/11 - 09:52:54
طی چند سال گذشته از گشت و گذار در اینترنت، ما می توانیم وب سایت های بیشتری را مشاهده کنیم که دارای صفحات خطای طراحی شده و خلاقانه هستند. این مقاله ایده ای را ارائه می دهد که چگونه با استفاده از انیمیشن ساده در CSS3 انجام شود.


نمايش صفحه خطا بصورت انيميشن با CSS

طی چند سال گذشته از گشت و گذار در اینترنت، ما می توانیم وب سایت های بیشتری را مشاهده کنیم که دارای صفحات خطای طراحی شده و خلاقانه هستند. این مقاله ایده ای را ارائه می دهد که چگونه با استفاده از انیمیشن ساده در CSS3 انجام شود.

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

روی رایانه رومیزی:

light_up_letter_sign_fit_content_width

در دستگاه تلفن همراه:

light_up_letter_sign_narrow_fit_content_width

 

ساختار HTML:

<div class="light-up-letters">40<span class="fade">4</span> err<span class="flicker">o</span>r p<span class="sparkle">a</span>ge</div>

فونت مخصوص برای روشن کردن حروف:

برای روشن کردن حروف ما قصد داریم از یک فونت رایگان با نام Budmo Jigglish استفاده کنیم. اما برای اولین بار، باید فونت آنلاین به یک فونت وب تبدیل شود.
هنگامی که فونت وب ایجاد می شود، باید یک فونت font-face برای بارگذاری فونت در یک صفحه وب مورد استفاده قرار گیرد.

در اینجا سبک CSS برای آن وجود دارد:

@font-face {
  font-family: 'budmojigglish';
  src: url('fonts/budmo-jigglish.eot');
  src: url('fonts/budmo-jigglish.eot?#iefix') format('embedded-opentype'),
    url('fonts/budmo-jigglish.woff2') format('woff2'),
    url('fonts/budmo-jigglish.woff') format('woff'),
    url('fonts/budmo-jigglish.ttf') format('truetype'),
    url('fonts/budmo-jigglish.svg#budmojigglish') format('svg');
  font-weight: normal;
  font-style: normal;
}

روشن کردن نامه ها توسط CSS:

متن زیر برای نشانه ما مورد استفاده قرار می گیرد: "صفحه خطای 404". این باید به اندازه کافی بزرگ باشد تا یک علامت با قلم Budmo Jigglish و قرمز رنگی ظاهر شود.

سبک های زیر می توانند این کار را انجام دهند:

.light-up-letters {
  display: inline-block;
  font-family: 'budmojigglish';
  font-size: 80px;
  font-weight: 100;
  color: red;
}

LIVE DEMO

 

اکنون وقت آن است که نامه های ما از علامت روشن شود. برای این منظور، یک ویژگی CSS متن-سایه به كار می آيد:

.light-up-letters {
  text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
}

LIVE DEMO

قبلا ما از یک ویژگی CSS متن-سایه برای ایجاد یک متن شبه 3D با توضیحات نحوه کار با آن استفاده کردیم.


انیمیشن سوسو زدن

اثر انیمیشن را می توان با تغییر دو خواص CSS متن سایه و كدري انجام داد.
برای خاموش کردن نور برای یک حرف ما تغییرات زير را انجام مي دهيم:

  •      تغيير Text-Shadow به none به منظور برداشتن نور در اطراف یک حرف؛
  •      مقدار کدري به 0.6 برای ایجاد یک نامه کم؛


مقدار دوره ای تغییر تعداد نامحدود بار تنها با استفاده از rulekeyframes در CSS3 امکان پذیر است. نیازی نیست که نحو و اصل کار آن را توضیح دهید، همانطور که در مقاله زیر نشان داده شده است: انیمیشن در CSS3.

در اینجا سبک CSS برای انیمیشن ما وجود دارد:

.light-up-letters .fade {
  animation: fade 5s linear infinite;
}

.light-up-letters .flicker {
  animation: flicker 6s 1s linear infinite;
}

.light-up-letters .sparkle {
  animation: sparkle 3s 3s linear infinite;
}

@keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

@keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}

LIVE DEMO

اگر ما می خواهیم نسخه های قدیمي تر مرورگرها را پوشش دهیم، ما باید سبک های خود را با پیشوند های فروشنده مثل این اضافه کنیم:

.light-up-letters .fade {
  -webkit-animation: fade 5s linear infinite;
  animation: fade 5s linear infinite;
}

.light-up-letters .flicker {
  -webkit-animation: flicker 6s 1s linear infinite;
  animation: flicker 6s 1s linear infinite;
}

.light-up-letters .sparkle {
  -webkit-animation: sparkle 3s 3s linear infinite;
  animation: sparkle 3s 3s linear infinite;
}

@-webkit-keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@-webkit-keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@keyframes flicker {
  51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  0%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@-webkit-keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none;
  }
}

@keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 85px red, 0 0 85px red, 0 0 85px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none;
  }
}

Final LIVE DEMO

 

1396/11/11 - 09:52:54
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي