CSS 畫一個心

效果圖：

 

實現原理：

可以把這個心分為兩部分，兩個長方形，分別設置 border-radius，transform: rotate() 。

設置屬性之后

再次添加一個，設置相反的 rotate

設置其中一個的 left 值 就成了

 

為了看起來有立體感，可以設置左邊的 box-shadow 。

 

CSS

            body{
                height: 100%;
                margin: 0;
            }
            div{
                width: 1px;
                height: 1px;
                margin: 300px auto;
                position: relative;
                animation: tiaodong .8s linear infinite;
            }
            div::before,div::after{
                content: '';
                position: absolute;
                width: 80px;
                height: 120px;
                background-color: red;
                border-radius: 50px 50px 0 0;
            }
            div::after{
                left: 28px;
                transform: rotate(45deg);
            }
            div::before{
                transform: rotate(-45deg);
                box-shadow: -5px -5px 10px grey;
            }
            @keyframes tiaodong{
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.05);
                }
                100%{
                    transform: scale(1);
                }
            }    

 

HTML

<div></div>

 

用的是 after 和 before 偽元素實現的，沒有考慮兼容性，在 IE 10 之前就顯示不出來了。

可以用 span 元素替換掉 after 和 before 解決掉。

需要加上： -ms-transform 。

若是用 span 元素畫的話，需要右邊的塊設置 z-index 屬性。

 

遇到的問題：

雖然在 IE 下畫出來心了，但是動畫卻做不出來。百度出的方法，並不能解決。暫時擱置

求指點迷津QAQ