MyLop.BanMai.Info xin giới thiệu và hướng dẫn bạn cách tạo ra Shine effect in pure CSS, hiệu ứng dải sáng lướt qua hình bằng CSS3 và SVG, một hiệu ứng hover khá thu hút người sử dụng mà lại không quá khó để cài đặt. Nào, chúng mình cùng bắt đầu nhé!

Hiệu ứng dải sáng lướt qua hình – Shine effect in pure CSS (+SVG)

View Demo   Download Files

Bước 1) Tạo code HTML:

<div class="mask">
	<a href="https://mylop.banmai.info">
		<img src="images/logo.png" alt="MyLop logo">
	</a>
</div>

Bên dưới thẻ <div>, tạo thêm một phần tử <svg> nữa để tạo mặt nạ cho hình ảnh. Nếu không có bước tạo mặt nạ này, ánh sáng sẽ tràn ra ngoài hình.

<svg height="0">
	<!-- THE mask -->
	<mask id="mask-firefox">
		<image width="160" height="160" xlink:href="images/logo.png" filter="url(#filter)">
	</mask>
 
	<!-- the filter to make the image white -->
	<filter id="filter">
		<feFlood flood-color="white">
		<feComposite in2="SourceAlpha" operator="in">
	</filter>
</svg>

Bước 2) Tạo code CSS:

Code CSS cho thẻ a:

.mask a {
	position: relative;
	display: inline-block;
	width: 160px;
	height: 160px;
 
	/* Sử dụng mặt nạ là chính bức ảnh .png để che đi những phần không muốn hiển thị: */
	-webkit-mask: url('images/logo.png') center;
	mask: url('#mask-firefox');
}

Code CSS cho phần tử “ảo” là “con” của thẻ <a> và đè lên thẻ <a>, đây chính là phần tử chứa dải sáng:

.mask a:after {
	content: '';
	position: absolute;
	pointer-events: none;
	top: -110%;
	left: -210%;
	width: 200%;
	height: 200%;
	opacity: 0;
	background: linear-gradient(
		to right, 
		rgba(255, 255, 255, 0.13) 0%,
		rgba(255, 255, 255, 0.13) 77%,
		rgba(255, 255, 255, 0.5) 92%,
		rgba(255, 255, 255, 0.0) 100%
	);
}

Thuộc tính left: -210%; và top: -110%; được cho giá trị âm để đẩy lùi dải sáng sang trái và lên phía trên của hình. Thuộc tính opacity: 0; để ẩn dải sáng đi. Thuộc tính background: linear-gradient được dùng để tạo dải sáng trắng gradient.

Khi di qua bức ảnh, tức là khi di qua thẻ <a>, cho dải sáng hiện ra, đồng thời kéo dải sáng sang phải và xuống dưới bằng cách tăng giá trị của các thuộc tính left và top:

.mask a:hover:after {
	opacity: 1;
	top: -30%;
	left: -30%;
	transition-property: left, top, opacity;
	transition-duration: 1s, 1s, .15s;
	transition-timing-function: ease;
}

Lưu ý: Trong tất cả các đoạn code HTML và CSS ở trên, nhớ thay toàn bộ images/logo.png bằng đường dẫn khác đến file ảnh của bạn nếu ảnh của bạn không phải là logo.png và/hoặc không nằm trong thư mục images.

Vậy là xong. Nếu bạn không muốn hiệu ứng dải sáng lướt qua hình mà thay bằng một hiệu ứng khác, VD như khi di qua thì có hình trái tim bay lên chẳng hạn, bạn chỉ việc thay đoạn code:

background: linear-gradient(
	to right, 
	rgba(255, 255, 255, 0.13) 0%,
	rgba(255, 255, 255, 0.13) 77%,
	rgba(255, 255, 255, 0.5) 92%,
	rgba(255, 255, 255, 0.0) 100%
);

bằng:

background: url(images/hearts.gif);

Hãy xem lại Demo và tải file về theo link dưới đây:

View Demo   Download Files

Từ khóa, tham khảo:

– Shine effect in pure CSS (+SVG)
– Shine icon
– Shine effect CSS

Đây là một hiệu ứng khá hấp dẫn, không quá khó để code. Hãy thử làm xem có được không nhé! Chúc bạn thành công!

Cheers,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017