সিএসএস৩ দিয়ে তৈরি করুন টেক্সট অ্যানিমেশন ইফেক্ট

Awesome! টিউনস

সকল Awesome! টিউনস

Tuberadio একটি চমৎকার অনলাইন মিউজিক প্লেয়ার

ইয়াসিন আরাফাত

চলুন জানি মানব সৃষ্টির রহস্য সম্পর্কে…………!!!!

সাইফুর রহমান

বেশি কিছু না সিএসএস CSS এর ১০টি টিপস দেখুন

টিউটো

সবার জন্য অ্যামেচার রেডিও

zicobaby

2,006 দেখা 7 টিউমেন্টস জোসস

টিউন বিভাগ ওয়েব ডিজাইন

প্রকাশিত

Level 0

মাহমুদুল হাসান

44 টিউনস 25 টিউমেন্টস 0 ফলোয়ার

টিউমেন্ট ফলো জোসস

আজ আমি আপনাদের দেখাব কি করে সিএসএস৩ দিয়ে অনেক সুন্দর টেক্সট অ্যানিমেশন ইফেক্ট তৈরি করবেন ।

এর জন্য আপনাকে প্রথমে একটি এইচটিএমএল ফাইল তৈরি করতে হবে এবং একটি সিএসএস ফাইল তৈরি করতে হবে ।

আমি আপনাদের কে ৩ টি টেক্সট অ্যানিমেশন ইফেক্ট করে দেখাব আর এর জন্য আপনাকে ৩টি সিএসএস ফাইল তৈরি করতে হবে আপনারা নিশ্চয়ই সিএসএস ফাইল লিঙ্ক করাতে পারেন আর যদি না পারেন তাহলে আমি করে দেখাচ্ছি ।

যেহেতু আমি ৩টি অ্যানিমেশন ইফেক্ট দেখাব তাই আপনারা ৩টি সিএসএস ফাইল তৈরি করে নিবেন । সিএসএস ফাইল লিঙ্ক করানোর জন্য এই কোড টুকু ব্যাবহার করেন ।


 <!DOCTYPE html>
 <html>
 <head>

 <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 <body>

 </body>

 </html>

আমরা যে এইচটিএমএল কোড টুকু লেখলাম তার বডি ত্যাগ এর মাজে এই কোড টুকু অ্যাড করবো

 <ul>
             <li><h3>Text 1</h3></li>
             <li><h3>Text 2</h3></li>
             <li><h3>Text 3</h3></li>
             <li><h3>Text 4</h3></li>
    <li><h3>Text 5</h3></li>
 </ul>

এখন আমরা ৩টি আলদা আলদা সিএসএস ফাইল তৈরি করবো ।
সিএসএস ফাইল ১.


.text-animation,
.text-animation:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.text-animation li{
z-index: 1000;
position: absolute;
bottom: 295px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 20s linear infinite 0s;
-moz-animation: textAnimation 20s linear infinite 0s;
-o-animation: textAnimation 20s linear infinite 0s;
-ms-animation: textAnimation 20s linear infinite 0s;
animation: textAnimation 20s linear infinite 0s;
}
.text-animation li h3 {
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
font-size: 240px;
padding: 0;
line-height: 200px;
color:#390;
}
.text-animation li:nth-child(2){
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.text-animation li:nth-child(3){
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.text-animation li:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.text-animation li:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.text-animation li:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}

/* Animation for the text */
@-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}

20% {
opacity: 1;
-webkit-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes textAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
20% {
opacity: 1;
-moz-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes textAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
10% {
opacity: 1;
-o-transform: translateY(0px);
}
20% {
opacity: 1;
-o-transform: scale(1);
}

23% { opacity: 0 }
27% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes textAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 1;
-ms-transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes textAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
20% {
opacity: 1;
transform: scale(1);
}
23% { opacity: 0 }
27% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}

এখানে কোড লিখাটা আমার জন্য সমস্যা হচ্ছে পরের গুলু তাই সোর্স ফাইল দিয়ে দিলাম ।

পুরো সোর্স টুকু ডাউনলোড করতে এখানে ক্লিক করুন
ওয়েব ডিজাইন সম্পর্কিত আমাদের হেল্প পেজে যেতে এখানে ক্লিক করুন

টিউমেন্ট ফলো জোসস

Level 0

আমি মাহমুদুল হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 44 টি টিউন ও 25 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।