2D, 3D and animation effects in HTML+CSS3

Although we work on the front end and generally don't use 2D, 3D, or animation effects, basically using JS or jQ to complete these animations, have you forgotten the basics?

Yesterday I revisited these things and wrote two small examples

1. Draw a heart with css

First, define a div in HTML.

<div class="heart"></div>

All I need is a div, and I use pseudo elements to draw it.

 <style>
        /* Location based on parent */
    .heart{
     position: relative;
    }
    /* Draw two images using pseudo elements and stitch together graphics to create a heart */
    .heart::after,
    .heart::before{
        content: "";
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 80px;
        background: red;
        /* borde-radius There are four values for each of the four corners, one for the upper left, the upper right, the lower right, the lower left */
        border-radius: 50px 50px 0 0;  

        /* Rotate element, two rotate together.Just one move later */
        transform: rotate(-45deg);
        transform-origin: 0 100%;        
    }
    /* Rotating elements stitch it with before pseudo elements to form a heart */
    .heart::after{
        left: -100px;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }
    </style>

With the above code, we get a hot heart

2. Draw a Taiji using css and animate it to rotate automatically

Like the heart above, I still use pseudo elements to write

Define a div, named taiji

<div id="taiji"></div>

Then use pseudo elements and see how I make it, not to mention more, just code it

<style type="text/css">
        #taiji {
            position: relative;
            width: 200px;
            height: 100px;
            background: white;
            border-color: black;
            border-style: solid;
            border-width: 4px 4px 100px 4px;
                  /*Round*/
            border-radius: 50%;
       
            margin: 100px auto;
               /* Define animation name for infinite loop with constant speed */
            animation: myfirst 4s linear infinite;
            
        }

        #taiji::before,
        #taiji::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            width: 25px;
            height: 25px;
            background: white;
            border: 38px solid black;
            
            border-radius: 50%;
        }

        #taiji::after {
            left: 50%;
            background: black;
            border-color: white;
        }

        /* Define Animation */

        @keyframes myfirst {
            0% {
                
                transform: rotate(0deg);
            }
            100% {
           
                transform: rotate(360deg);
            }

        }
    </style>

Posted on Mon, 06 Jan 2020 01:04:20 -0800 by andrew_ww