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实现跳动的桃心

最新文章

热门文章