amartips টেক্সটের ভিতর অ্যানিমেশন ছবি যুক্ত করুন HTML CSS দিয়ে। কেউ লেখাতে চাপ দিলেই ইমেজ এনিমেশন হবে!!!

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সকলেই ভাল আছেন। আমিও আল্লাহর রহমতে ভালো আছি এবং সুস্থ আছি আলহামদুলিল্লাহ।

আজকে আমি আপনাদের সাথে আলোচনা করব কিভাবে এইচটিএমএল সিএসএস দিয়ে টেক্সট মাস্ক তৈরি করবেন।
ডেমো না দেখিয়ে আপনাদের বোঝানো মুশকিল যে এটা কি। তাই নিচে ডেমো এর লিঙ্ক দিয়ে দিলাম এখান থেকে দেখে আসতে পারেন।

Demo Link:

আপনি চাইলে নিচের HTML, CSS কোড কপি করতে পারেন। সেক্ষেত্রে আপনার নিজের ইমেজ ব্যবহার করতে হবে।
আর যদি সম্পূর্ণ কপি করতে চান তাহলে সোর্সকোড উপরের লিঙ্ক থেকে ডাউনলোড করে নিতে পারেন।

HTML:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>Text Mask</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” type=“text/css” href=“style.css”>

<body>

<section class=“banner”>
<h1>TRICK BD</h1>
</section>

</body>
</head>

CSS:

body{
margin: 0;
padding: 0;
font-family: sans-serif;
}

*{
boxsizing: borderbox;
}

.banner{
background-color: #000000;
height: 100vh;
display: flex;
alignitems: center; /*vertical center*/
justifycontent: center; /* horizontal center*/
}

.banner h1{
margin:0;
color:transparent;
font-size: 180px;
background-image:url(‘img/rfxu1nokaX.jpg’);
backgroundsize: cover;
backgroundclip: text;
webkitbackgroundclip: text;
mozbackgroundclip: text;
obackgroundclip: text;
transition:background-position 1s ease;

}

.banner h1:hover{
background-position: 0 -50%;
}

সম্পূর্ণ পোস্টটি পড়ার জন্য আপনাকে ধন্যবাদ।

Leave a Reply