لطفا صبر کنید ...

ایجاد افکت دایره ای با CSS Transitions

الهام غایب

توسط الهام غایب

نویسنده
دیدگاه ها: 0
بازدید ها : 196
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در مقاله آموزشی امروز در لیداوب به آموزش نحوه ایجاد افکت دایره‌ای موس با استفاده از CSS Transitions می‌پردازیم. با ما همراه باشید.


ما می‌توانیم با استفاده از خصوصیت شعاع مرزی یا border radius اشکال دایره‌ای ایجاد کنیم که اکثر مواقع در طراحی وب سایت‌ها به چشم می‌خورند. به دلیل این که دایره یکی از اشکال خاص محسوب می‌شود در این مقاله می‌خواهیم نحوه ایجاد افکت‌های دایره‌ای موس را توضیح دهیم.

کدهای HTML

برای بیشتر مثال‌ها از ساختار زیر استفاده می‌کنیم:

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img-1">
			<div class="ch-info">
				<h3>Use what you have</h3>
				<p>by Angela Duncan <a href="https://drbl.in/eOPF">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-2">
			<div class="ch-info">
				<h3>Common Causes of Stains</h3>
				<p>by Antonio F. Mondragon <a href="https://drbl.in/eKMi">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-3">
			<div class="ch-info">
				<h3>Pink Lightning</h3>
				<p>by Charlie Wagers <a href="https://drbl.in/ekhp">View on Dribbble</a></p>
			</div>
		</div>
	</li>
</ul>

گرچه، می‌توانیم در اینجا از تصاویر هم استفاده کنیم اما به خودمان کمی آزادی عمل داده و به جای آن از تصاویر پشت زمینه استفاده می‌کنیم. ما این تصاویر را در کلاس‌هایی که با “ch-img-“ آغاز می‌شوند تعریف می‌کنیم. علاوه بر این، بخشی برای توصیف آیتم به همراه یک عنوان هم خواهیم داشت. حالا می‌خواهیم افکت موس را ایجاد کنیم.

کدهای CSS

حالا کمی استایل رایج برای فهرست و آیتم‌های فهرست تعریف می‌کنیم:

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

می‌توانیم با نمایش inline-block و تنظیم خصوصیت text-align برای استفاده از والد خود در مرکز، آیتم‌ها را در وسط قرار دهیم. برخی از مثال‌های این مقاله دارای ساختار متفاوتی خواهد بود که به هر یک به تفصیل خواهیم پرداخت.

مثال اول

ایجاد افکت دایره ای با CSS Transitions

مثال اول با تغییر اندازه، توضیحات را آشکار خواهد کرد و ما box shodow متعلق به آیتم را حرکت خواهیم داد. بنابراین، ابتدا آیتم را جایگذاری کرده و یک box shadow زیبا و یک transition برای آن مشخص می‌کنیم:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

همانطور که قبلا توجه کرده‌اید، ما دو کلاس به هر آیتم داده‌ایم، یکی ct-item و دیگری هم برای تعریف یک تصویر پشت زمینه خاص استفاده خواهد شد:

.ch-img-1 { 
	background-image: url(../images/1.jpg);
}

.ch-img-2 { 
	background-image: url(../images/2.jpg);
}

.ch-img-3 { 
	background-image: url(../images/3.jpg);
}

عنصر متعلق به بخش توضیحات به درستی جایگذاری شده و ما با تعریف یک مقدار RGBA، یک پشت زمینه نیمه شفاف به آن می‌دهیم. تاری آن صفر بوده و اندازه آن هم صفر خواهد بود:

.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.8);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

عنوان این آیتم دارای پدینگ متناسب و حاشیه و یک سایه متنی ملایم خواهد بود:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

عنصر پاراگراف دارای تاری صفر و یک transition خواهد بود (می‌خواهیم آن را محو کنیم اما با کمی تاخیر):

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
}

لینک با حروف بزرگ نوشته شده و ما رنگ نشانگر موس را به زرد تغییر می‌دهیم:

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

حالا یک افکت جالب برای نشانگر موس رخ می‌دهد. آیتم، شعاع گسترده box shadow خود را از ۱۶ پیکسل به ۱ پیکسل می‌رساند:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

توضیحات محو شده و اندازه آن به ۱ می‌رسد:

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

پاراگراف توضیحات هم محو می‌شود اما با تاخیر:

.ch-item:hover .ch-info p {
	opacity: 1;
}

مثال دوم

ایجاد افکت دایره ای با CSS Transitions

ساختار HTML در این مثال مشابه مثال اول است. در این نمونه از box shadow آیتم برای پر کردن دایره و پس زمینه توضیحات استفاده خواهیم کرد. بنابراین، هیچ اتفاق خاصی در اینجا رخ نمیدهد به جز box shadow که یک خط دیگر دارد:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 0 rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

و تصاویر پس زمینه:

.ch-img-1 { 
	background-image: url(../images/4.jpg);
}

.ch-img-2 { 
	background-image: url(../images/5.jpg);
}

.ch-img-3 { 
	background-image: url(../images/6.jpg);
}

توضیحات دوباره کوچک می‌شوند:

.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
	backface-visibility: hidden;
}

حالا به عناصر تایپوگرافیکی کمی استایل می‌دهیم:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 65px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

وقتی نشانگر موس روی آیتم قرار بگیرد، box shadow داخلی را به شعاع گسترده ۱۱۰ پیکسل می‌رسانیم. این باعث می‌شود کل دایره پوشیده شود:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}

توضیحات را به اندازه بزرگ درآورده و آن را کم کم نمایان می‌کنیم:

.ch-item:hover .ch-info {
	opacity: 1;
	transform: scale(1);	
}

مثال سوم

ایجاد افکت دایره ای با CSS Transitions

در این نمونه با خاصیت چرخش بازی می‌کنیم. ساختار این مثال کمی با دو نمونه قبلی متفاوت است چون باید thumbnail را به عنوان یک واحد دوم اضافه کنیم. بنابراین، آیتم فهرست به شکل زیر خواهد بود:

<li>
	<div class="ch-item">	
		<div class="ch-info">
			<h3>Music poster</h3>
			<p>by Jonathan Quintin <a href="https://drbl.in/eGjw">View on Dribbble</a></p>
		</div>
		<div class="ch-thumb ch-img-1"></div>
	</div>
</li>

Item division به شکل قبل استایل داده خواهد شد:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

عنصر thumbnail دارای transform-origin مخصوص (جایی در میانه سمت راست) بوده و یک transition خواهد داشت. این المان همان عنصری است که می‌خواهیم در زمان قرار گرفتن نشانگر موس روی آن، به سمت پایین چرخش داشته باشه و عنصر توضیحات را نمایان کند:

.ch-thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	transform-origin: 95% 40%;
	transition: all 0.3s ease-in-out;
}

استفاده از شبه کلاس :after باعث ایجاد یک شیب شعاعی خواهد شد:

.ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	top: 40%;
	left: 95%;
	margin: -4px 0 0 -4px;
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

حالا تصاویر پس زمینه هر یک از عناصر thumbnail را تعریف می‌کنیم:

.ch-img-1 { 
	background-image: url(../images/7.jpg);
	z-index: 12;
}

.ch-img-2 { 
	background-image: url(../images/8.jpg);
	z-index: 11;
}

.ch-img-3 { 
	background-image: url(../images/9.jpg);
	z-index: 10;
}

عنصر توضیحات دارای استایل زیر خواهد بود:

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	background: #c9512e url(../images/noise.png);
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

عناصر تایپوگرافیکی جای‌گیری شده و به شکل زیر استایل داده خواهند شد:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	height: 85px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

Anchor کمی دایره‌ای بوده و باید در زمان قرار گرفتن موس روی آیتم به سمت راست حرکت کند:

.ch-info p a {
	display: block;
	color: #333;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 24px;
	margin: 7px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	opacity: 0;
	transition: 
		transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	transform: translateX(60px) rotate(90deg);
}

.ch-info p a:hover {
	background: rgba(255,255,255,0.5);
}

از آنجایی که می‌خواهیم حرکت و تاری با تاخیر اتفاق بیافتد، اما transition پشت زمینه دارای تاخیر نباشد. بنابراین، transition‌ها را از هم تفکیک می‌کنیم. وقتی موس روی آیتم قرار گرفت، thumbnail را چرخانده و عنصر لینک را حرکت می‌دهیم:

.ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

مطالعه مقالات مشابه در لیداوب:

امیدوارم این افکت‌ها را ایجاد کنید و از آن‌ها  لذت ببرید و بتوانید از آن‌ها در طراحی‌های خود استفاده کنید. می‌توانید مقالات مشابه CSS را در کتابخانه آنلاین لیداوب دنبال کنید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های