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

سلام

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

بپرسم

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

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

.text:nth-child(۵n + ۱) {

stroke: #۳cba54;

-webkit-animation-delay: -۱.۳s;

animation-delay: -۱.۲s;

}

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

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

(۵ x ۰) + ۱ = ۱ = ۳rd Element

(۵ x ۱) + ۲ = ۷ = ۷th Element

(۵ x ۲) + ۳ = ۱۳ = ۱۳th 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>

۱۰

۱۱

۱۲

<text text-anchor="middle" x="۵۰%" y="۵۰%" dy="۰.۳۵em">Legend Blogs</text>

</symbol>

</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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>۳D Animated Text Example</title>

</head>

<body>

<text text-anchor="middle" x="۵۰%" y="۵۰%" dy="۰.۳۵em">Legend Blogs</text>

</symbol>

</svg>

</body>

</html>

مطلب پیشنهادی: آموزش پیدا کردن کلمه در متن B4A

کدهای 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 {
  ۱۰۰% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  ۱۰۰% {
    stroke-dashoffset: -400;
  }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

@charset "utf-8";

/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

body {

background: #fff;

font: ۵em/۱ Open Sans, Impact;

margin: ۰;

}

.text {

fill: none;

-webkit-animation: stroke ۶s infinite linear;

animation: stroke ۶s infinite linear;

stroke-width: ۳;

stroke-linejoin: round;

stroke-dasharray: ۷۰ ۳۳۰;

stroke-dashoffset: ۰;

}

.text:nth-child(۵n + ۱) {

stroke: #۳cba54;

-webkit-animation-delay: -۱.۳s;

animation-delay: -۱.۲s;

}

.text:nth-child(۵n + ۲) {

stroke: #f4c20d;

-webkit-animation-delay: -۲.۱s;

animation-delay: -۲.۴s;

}

.text:nth-child(۵n + ۳) {

stroke: #db3236;

-webkit-animation-delay: -۳.۲s;

animation-delay: -۳.۶s;

}

.text:nth-child(۵n + ۴) {

stroke: #۵۶d9ef;

-webkit-animation-delay: -۴.۴s;

animation-delay: -۴.۸s;

}

.text:nth-child(۵n + ۵) {

stroke: #۴۸۸۵ed;

-webkit-animation-delay: -۵s;

animation-delay: -۶s;

}

@-webkit-keyframes stroke {

۱۰۰% {

stroke-dashoffset: -۴۰۰;

}

@keyframes stroke {

۱۰۰% {

stroke-dashoffset: -۴۰۰;

}

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

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

موفق باشید.