In this tutorial, you will learn how to create a heart share and make a pulsing heart with CSS and HTML.
HTML:
<!DOCTYPE html><htm1>
<head>
<link href="css/mrasquare.css" type="text/css" rel="stylesheet">
<meta charset="IS0-8859-1"
</head>
<body>
<div class="playground">
<div class="container">
<div class="heart"></div>
</div>
</div>
<span>I Love Code</span>
</body>
</html>CSS:
body {
text-align: center;
}
.playground{
position: absolute;
left: 50%;
top: 50%;
transform: translate (-50%, -50%);
}
.heart{
height: 100px;
width: 100px;
background: #FF0000;
transform: rotate (45deg);
}
.heart:before{
content: "";
height: 100%;
width: 100%;
position: absolute;
background: #FF0000;
left: -55%;
top: 0%;
border-radius: 50%;
}
.heart:after{
content: "";
height: 100%;
width: 100%;
position: absolute;
background: #FF0000;
top: -55%;
right: 0%;
border-radius: 50%;
}
.container
animation: heartbeat 0.4s infinite;
}
@keyframes heartbeat{
transform: scale (1.2);
}
span{
color: #006266;
font-size: 100px;
font-weight: bold;
}Demo:
Opmerkingen