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

 

转载于:https://www.cnblogs.com/wyhlightstar/p/7729610.html