ساخت متن سه بعدی با html,css (همراه با سورس)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

ساخت متن سه بعدی با html,css (همراه با سورس)

سلام

با Css کارهای خیلی جذابی میشه انجام داد، در این مقاله میخوایم یاد بگیریم که چطوری میتونیم یک متن سه بعدی جذاب همراه با انمییشن بسازیم، متنی که میخوایم بسازیم به صورا زیر خواهد بود، در ادامه همراه بپرسم باشید.

بپرسم

در این مثال، یک ترفند CSS را معرفی می‌کنم:- :nth-child

.text:nth-child(5n + 1) {
  stroke: #3cba54;
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.2s;
}

ابتدا باید یاد بگیرید که nth-child چطوری کار میکند و منظور ما از 5n+1 چی هست:

(5 x 0) + 1 = 1 = 3rd Element
(5 x 1) + 2 = 7 = 7th Element
(5 x 2) + 3 = 13 = 13th Element

با استفاده از این ترفند CSS می توانید رنگ ضربه و تاخیر انیمیشن را روی عنصر خود تنظیم کنید. در بخش رنگ، می توانید رنگ مورد علاقه خود را انتخاب کنید و تاخیر انیمیشن را بر اساس سازگاری مرورگر انتخاب کنید.

در بخش HTML، باید تگ SVG را با چند نود فرزند پیاده سازی کنید. برای این مثال من از یک تگ ساده به عنوان موارد استفاده چندگانه استفاده کرده ام، به عنوان مثال:

<svg viewBox="0 0 600 300">
  
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy="0.35em">Legend Blogs</text>
  </symbol>
  
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
</svg>

متوجه نشدید؟! نگران نباشید بیاید تا از ابتدای کار پیش بریم، در انتهای آموزش سورس را میتوانید دانلود کنید.

کدهای 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D Animated Text Example</title>
<link rel="stylesheet" href="lb_css.css" type="text/css" />
</head>
<body>
<svg viewBox="0 0 600 300">
  <!-- Symbol-->
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy="0.35em">Legend Blogs</text>
  </symbol>
  <!-- Duplicate symbols-->
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
</svg>
    
</body>
 
</html>

کدهای CSS:

@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  background: #fff;
  font: 5em/1 Open Sans, Impact;
  margin: 0;
}
.text {
  fill: none;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
}
.text:nth-child(5n + 1) {
  stroke: #3cba54;
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #f4c20d;
  -webkit-animation-delay: -2.1s;
  animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
  stroke: #db3236;
  -webkit-animation-delay: -3.2s;
  animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
  stroke: #56d9ef;
  -webkit-animation-delay: -4.4s;
  animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
  stroke: #4885ed;
  -webkit-animation-delay: -5s;
  animation-delay: -6s;
}
@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

کار به اتمام رسید؛ به همین راحتی تونستید یک متن سه بعدی همراه با انمیشن جذاب با CSS بسازید. سورس را در انتهای آموزش میتوانید دانلود کنید.

مطلب پیشنهادی: آموزش مقدماتی PHP - قسمت سوم(متغیرها)

موفق باشید.