It’s 520 today.

A gentle greeting, a bunch of beautiful flowers, a true confession. But as programmers, we do not only have the above method of communication, remember that each of us has a magic skill that others do not have, is our daily hard to type code.

On this special day, use the magic code in our hands to make a special gift for your partner. Here are three ways to draw hearts in CSS. The implementation process is so simple that you are guaranteed to learn it at a glance.

1. Div a heart

The core way to draw a heart out of a div is to use pseudo-elements. First, we’ll write a div on the page:

<div></div>Copy the code

Using CSS, change the div to an orange square:

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
}Copy the code

Then we draw a blue circle and a yellow circle using two pseudo-elements of the element :before and :after, and place their centers on the upper and right sides of the square, respectively.

div:before {
  content: "";
  position:absolute;
  top: -50px;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}
div:after{
  content: "";
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
}Copy the code

Again, make the two circles the same color as the square:

div:before {
  ...
  background-color: tomato;
}
div:after{
  ...
  background-color: tomato;
}Copy the code

Finally, rotate the div element 45 degrees to create the heart! It’s that simple.

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
  transform: rotate(-45deg);
}Copy the code

2. One heart is not enough, so let’s draw a screen

One heart is not enough for me, so draw her a screen of heart. ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤

I have endless expression of mind to you, there is endless to write div:

HTML:

<h1>Love is everywhere...</h1>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>.Copy the code

Float them to fill the screen:

.heart{
  position: relative;
  width: 100px;
  height: 90px;
  float: left;
}Copy the code

Two pseudo-elements represent my left atrium and my right atrium:

.heart:before..heart:after{
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
  transform-origin: 0 100%;
}
.heart:after{
  left: 0;
  transform-origin :100% 100%;
}Copy the code

Rotate the left and right atrium 45 degrees to form my full screen heart:

.heart:before,
.heart:after{
  ...
  transform: rotate(- 45deg); }.heart:after{
  ...
  transform: rotate(45deg);
}
Copy the code

How much I love you

“I used to see things with my naked eye, but the moment I died, I began to see the world with my heart’s eye. Everything was really clearer than ever before.” – Stephen chow

No number of hearts can show how much I love you, so I want you to see that my heart is made up of every cell that loves you:

<div class="heart"></div>Copy the code

CSS:

.heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 105px;
  margin: -52.5 px. 0 0 -52.5 px.;
}Copy the code

Pixel-level worlds can be implemented with box-shadow properties (see article CSS3 Box-shadow Graphics Generation Techniques) :

.heart::before {
  content: ' ';
  display: block;
  transition: all 400ms;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -15px;
  box-shadow: 30px 15px #8e1a19.45px 15px #ac0500.75px 15px #f73f0c.90px 15px #fa5f27.15px 30px # 740100.30px 30px #8e0500.45px 30px #8e1918.60px 30px #ca1300.75px 30px #f34f2b.90px 30px #df351f.105px 30px #f77c2a.15px 45px #4b0000.30px 45px # 690100.45px 45px #8e0f0b.60px 45px #bf1000.75px 45px #f84010.90px 45px #f04222.105px 45px #fa5724.15px 60px # 451312.30px 60px #5a0100.45px 60px #840e0c.60px 60px #a51d1a.75px 60px #ed2805.90px 60px #d9321e.105px 60px #f44622.30px 75px #3b0000.45px 75px #5d1a1b.60px 75px #8e1a19.75px 75px #a80700.90px 75px #b90a00.45px 90px #3d0000.60px 90px # 551415.75px 90px # 670100.60px 105px # 340000;
  animation: pulse 1.2 s steps(1) infinite;
}Copy the code

That’s it, a pixel-level heart, and then we can animate it, animate every cell, you can try it out.

Finally, give you a CSS heart-shaped animation: