Css3 会跳动的心

开发工具与关键技术：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()缩放：

效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！