preface

The whole world is full of sour smell of love, only I scattered the fragrance of single dog…

The realization of the ❤

The realization idea is as follows: First of all, we prepare a square. In the square, two circles are offset to the left and the upper side respectively. After filling the square and circle with color, rotate the entire element by 45 degrees. Legend:Copy the code

Finally, for a better look, we can animate the element with shadows and zooming so that it looks like it’s going plop

The following code

HTML
<div class="box"></div>
<p>I Love You Forever</p>

CSS
.box {
    width: 120px;
    height: 120px;
    background: #ff0000;
    transform: rotate(45deg) scale(0.85);
    margin: 200px auto;
    animation: love 1s infinite;
    margin-bottom: 80px;
    box-shadow: 0 0 20px rgba(255.0.0.0.7);
}

.box::before,
.box::after {
    content: ' ';
    position: absolute;
    width: 120px;
    height: 120px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255.0.0.0.7);
}

.box::before {
    left: -68px;
}

.box::after {
    top: -68px;
}

p {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: rgba(255.0.0.0.5);
}

@keyframes love {
    0% {
        transform: rotate(45deg) scale(0.85);
    }

    50% {
        transform: rotate(45deg) scale(1);
    }

    100% {
        transform: rotate(45deg) scale(0.85); }}Copy the code

The final effect is as follows: