会跳动的心

开发工具与关键技术：DW scale()缩放
作者：梁茵茵
撰写时间：2019年2月9日

先做一个简单的????图，再利用Css3的动画scale()函数让元素根据中心原点对对象进行缩放，这样就可以实现一颗会跳动的心了。下面让我们一起来看看效果图吧！

嗯~~~是不是很简单，就一个菱形和两个半圆组合。
菱形的效果图以及代码：

半圆的效果图以及代码：


下面就是整个心形的代码：
HTML的结构布局：

Css的样式代码：

@charset "utf-8";
/* CSS Document */
.cartoonist{
	 width: 200px;
	height: 200px;
	margin: 0 auto;
	margin-top: 80px;
}
.content{
    width: 200px;
	height: 200px;
	display: flex;
	transform:rotate(-45deg);
}
.box{
	width: 100px;
	height: 150px;
}
.heart{
	width: 100px;
	height: 150px;
	display: flex;
	align-items: flex-end;
}
/*---------------------半圆--------------------*/
.riangle{
	width: 100px;
	height: 50px;
    background: #F31519;
	border: 1px solid #F31519;
	border-radius: 150px 150px 0px 0px;	
    margin-top: -1px;
}
.lriangle{
	width: 50px;
	height: 100px;
	background: #F31519;
	border: 1px solid #F31519;
	border-radius: 0px 150px 150px 0px;
    margin-left: -1px;
}
/*---------------------菱形--------------------*/
.square{
	width: 100px;
	height: 100px;
	background: #F31519;
	margin-top: -1px;
}

scale()缩放：

效果图：