schlagendes Herz-HTML-Tutorial-php.cn

schlagendes Herz

WBOY

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

Original

2423 Leute haben es durchsucht

Verwenden Sie CSS3, um ein schlagendes Herz zu erstellen, ohne Bilder zu verwenden.

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>

Nach dem Login kopieren

Zuerst werden die beiden Divs verschoben und die obere linke und obere rechte Ecke werden abgerundet:

<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>;
            }

Nach dem Login kopieren

wird zu:

Dann drehen Sie die beiden Divs. Das linke Div verwendet die untere rechte Ecke als Drehpunkt und dreht sich um 45 Grad im Uhrzeigersinn. Das rechte Div verwendet die untere linke Ecke als Drehpunkt und dreht sich um 45 Grad gegen den Uhrzeigersinn 🎜>

<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>

Nach dem Login kopieren

Die Herzform kommt heraus:

Lassen Sie Ihr Herz höher schlagen und fügen Sie Animationen hinzu:

<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>

Nach dem Login kopieren

Okay, ein schlagendes Herz ist fertig.

Vollständiges 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>

Nach dem Login kopieren