跳動的心

WBOY
發布: 2016-09-21 13:56:13
原創
2401 人瀏覽過

不用圖片,使用CSS3做出一個跳動的心。

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>
登入後複製

首先兩個div浮動,左上和右上角變圓:

<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>;
            }                        
登入後複製

變成:

接著讓兩個div旋轉一下,左邊的以右下角為旋轉點正時針轉45度,右邊的以左下角為旋轉點逆時針轉45度,加點陰影:

<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>
登入後複製

心形出來了:

讓心動起來,加點動畫吧:

<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>
登入後複製

好了,一顆跳動的心就完成了。

完整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>
登入後複製

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板