Hey! readers, Hope you are doing osm. Guys, Today in this blog you’ll learn how can create Vibrating/Pulsing Heart Shape by using CSS's "::before" And "::after" pseudo selectors.

What is Pseudo Selectors in CSS.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. /* The first line of every element. */ p::first-line { color: blue; text-transform: uppercase; }

See this example :

We have also linked a video tutorial which has given below for you. Where we have shown you to create this rating page using javascript in very simple and easey steps and we hope to all of you that given tutorial may be cleared your whole doubts.

Watch Tutorial of Create Vibrating Heart Shape using CSS ::before & ::after

And for your more clearance, we attached a download source code file link in the last of this post also just scroll down and download it now to more practice. Don't worry guys, Given Source-Code is almost free of cost.

Don't worry, We always go to learn web development codes to you by taking simple and easy steps. And we are 100% sure about our codes which is always too simple & clear to understand and helps you learn something new through every blog's post.

Hope you might like these posts
★ CSS Popup Login Form
★ Dark Neumorphism Toggle Icons
★ Like & Dislike Rating Page

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Create Vibrating Heart Shape using CSS ::before & ::after | WebKitCoding</title>
</head>
<body>
  <div class="heart"></div>
</body>
</html>

CSS CODE:

body{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0b1522;
}
.heart{
	height: 70px;
	width: 70px;
	background: #f20044;
	position: relative;
	transform: rotate(-45deg);
	box-shadow: -10px 10px 90px  #f20044;
	animation: heart 0.6s linear infinite;
}
@keyframes heart{
	0%{
         transform: rotate(-45deg) scale(1.07);
	}
	80%{
         transform: rotate(-45deg) scale(1.0);
	}
	100%{
         transform: rotate(-45deg) scale(0.8);
	}
}
.heart:before{
	content: '';
	position: absolute;
	height: 70px;
	width: 70px;
	background: #f20044;
	top: -50%;
	border-radius: 50px;
	box-shadow: -10px -10px 90px  #f20044;
}
.heart:after{
	content: '';
	position: absolute;
	height: 70px;
	width: 70px;
	background: #f20044;
	right: -50%;
	border-radius: 50px;
	box-shadow: 10px 10px 90px  #f20044;
}

How To Create Vibrating Heart Shape using CSS ::before & ::after | WebKitCoding

What is Pseudo Selectors in CSS.

See this example :

Watch Tutorial of Create Vibrating Heart Shape using CSS ::before & ::after

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding