beating heart-HTML Tutorial-php.cn

beating heart

WBOY

Release： 2016-09-21 13:56:13

Original

2423 people have browsed it

No pictures, just use CSS3 to make a beating heart.

HTML:

<span style="color: #0000ff;">　　　　<</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Copy after login

First, the two divs are floated, and the upper left and upper right corners are rounded:

<span style="color: #800000;">            .box</span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            .left,.right</span>{<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .box div</span>{<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;
            }

Copy after login

becomes:

Then rotate the two divs. The left one uses the lower right corner as the rotation point and rotates 45 degrees clockwise. The right one uses the lower left corner as the rotation point and rotates 45 degrees counterclockwise. Add some shadow:

<span style="color: #800000;">.left</span>{<span style="color: #ff0000;">        
                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;       
        }<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">                
                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;     
            }<br><br>

Copy after login

The heart shape comes out:

Get your heart pumping and add some animation:

<span style="color: #800000;">　　　　.box div</span>{<span style="color: #ff0000;">
                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;/*这个不能少*/
   　　　　　　 }<span style="color: #800000;">
　　　　@keyframes lb</span>{<span style="color: #ff0000;">
                0%{
                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;
                }<span style="color: #800000;">
                50%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;
                }<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;
                }<span style="color: #800000;">
            }</span>

Copy after login

Okay, a beating heart is complete.

Full CSS:

<span style="color: #800000;">        <style>
            .box</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            .left,.right</span>{<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .box div</span>{<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;
            }<span style="color: #800000;">
            .left</span>{<span style="color: #ff0000;">        
                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;       
            }<span style="color: #800000;">
            @keyframes lb</span>{<span style="color: #ff0000;">
                0%{
                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;
                }<span style="color: #800000;">
                50%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;
                }<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">
                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">
                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;
                }<span style="color: #800000;">
            }
            .right</span>{<span style="color: #ff0000;">                
                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;     
            }<span style="color: #800000;">
        </style>    </span>

Copy after login