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

mehedi81402

4 years ago

আসসালামু আলাইকুম

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

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

Demo Link:

Click Here To See

আপনি চাইলে নিচের 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;
}

*{
	box-sizing: border-box;
}

.banner{
	background-color: #000000;
	height: 100vh;
	display: flex;
	align-items: center; /*vertical center*/
	justify-content: center; /* horizontal center*/
}

.banner h1{
	margin:0;



	color:transparent;
	font-size: 180px;
	background-image:url('img/rfxu1nokaX.jpg');
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-o-background-clip: text;
	transition:background-position 1s ease;

}

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

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