Detailed graphic explanation on how to use html and CSS to create love effects

CSS plays a very important role in page layout. CSS can not only beautify pages built with HTML, but also create various cool effects. As a front-end staff, can you use CSS to draw hearts? This article will share with you how to draw a heart shape using HTML and CSS, as well as the code to implement the love effect using CSS3. It has certain reference value and interested friends can take a look.

Using html and CSS to draw hearts requires the use of many properties in CSS, such as border-radius fillets, positioning, animation animation, etc. If you are unclear, you can read my previous article. Or visit CSS video tutorial, I hope it can help you!

Explanation by example: A heart can be seen as consisting of two circles and a square. The side length of the square is the diameter of the circle.

HTML part:

Use three divs to represent the left circle, right circle and square respectively

<div class="box">
   <div class="round1"></div>
   <div class="round2"></div>
   <div class="bottom"></div>
</div>

CSS part:

Use border-radius:50 %Set it as a circle, use transform:rotate(45deg) to rotate the square 45 degrees, and combine it with the circle to form a heart shape

.box{
    width:180px;
    height:160px;
    margin:100px auto;
    animation:size 1s infinite;
    animation-direction:alternate;
    transition:1s all;
    border: 1px solid black;
   }
   .round1{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    left: 0;
    top: 0;
    position:absolute;
   }
   .round2{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    position:absolute;
    right: 0;
    top: 0;
   }
   .bottom{
    width:100px;
    height:100px;
    background-color:hotpink;
    position:absolute;
    top:40px;
    left:40px;
    transform:rotate(45deg);
   }
   @keyframes size{
    0%{
     transform:scale(0.6);
    }
    100%{
     transform:scale(1);
    }
   }

Finally, use the animation animation in CSS3 to achieve the love special effect, so that the love can Automatic scaling, the effect is as shown below:

The above introduces how to draw a love using html and CSS. It is relatively simple. Beginners must try it by themselves to see what you can do. I can’t draw a heart, I hope this article will be helpful to you! For more related video tutorials, please visit CSS3 Video Tutorial

More cool CSS3, html5, and javascript special effects codes are available at: js special effects collection

The above is the detailed content of Detailed graphic explanation on how to use html and CSS to create love effects. For more information, please follow other related articles on the PHP Chinese website!