CSS实现跳动的桃心

又来刷题--CSS动画实现跳动的桃心，从哪里跌倒就从哪里爬起来，哈哈哈~

分析：首先，得画出一个桃心，然后再用动画效果让它跳起来（关于动画，实在是弱项啊~~~，得补补了）。

第一步：画桃心，思路是一个正方形+两个半圆，拼起来，然后旋转45度（百度告诉我的，嘿嘿）

1.用CSS绘制一个正方形+两个半圆

画正方形、圆、半圆可以参考这篇文章 https://blog.csdn.net/lzgs_4/article/details/46827761

 .heart {
            height: 100px;
            width: 100px;
            background-color: red;
            display: inline-block;
        }
        .semicircle-horizontal {
            border-radius: 100px 100px 0 0;
            height: 50px;
        }
        .semicircle-vertical {
            border-radius: 100px 0 0 100px;
            width: 50px;
        }

<article class="wrapper">
            <div class="heart semicircle-vertical"></div>
            <div class="heart"></div>
            <div class="heart semicircle-horizontal"></div>
</article>

　　依次画出这三个图形后发现它们之间有间隔，检查了margin，发现是0，所以又求助百度，这个是解决方法https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

2. 调整位置，将三个图形拼起来

.wrapper {
            font-size: 0; /*去除inline-block各元素之间的间距*/
}
 .semicircle-horizontal {
            border-radius: 100px 100px 0 0;
            height: 50px;
            margin-bottom: 100px;    /*调整位置*/
            margin-left: -100px;
        }

　　这是拼起来的效果，再旋转45度就完成桃心了。

3.旋转45度，把桃心放正

 .wrapper {
            font-size: 0; /*去除inline-block各元素之间的间距*/
            transform:  rotate(45deg);
            -webkit-transform:  rotate(45deg);
            -o-transform:  rotate(45deg);
            -moz-transform:  rotate(45deg);
}

　　效果图

第二步、实现动画效果，用transfrom:scale() 实现

演示地址：https://codepen.io/jessy90/pen/BVOQLX

CSS实现跳动的桃心

猜你喜欢