教大家用html/css简单写一个心形，表白必学

1，建议大家使用Sublime编辑软件去编写，先给大家看个效果图

标题

 

 

二，教程开始，图像是由三个图像合成的，两个圆形，一个正方形，大部分用div布局完成的

1，首先建一个大的div

效果图

 

2，建一个圆形，首先画一个正方形，新建多一个div，css的width属性为260~270px吧，height为150px吧，然后再通过border-radius这个属性把弧边化，

设置border-radius: 50%，把背景颜色改成红色，然后用overflow属性把多出来多出来就切掉

 效果图

3，新建一个div，class为r，class名字自己可以起多一个起的，建多一个圆形，使用步骤2的方法新建多一个一样的圆形，然后用相对定位relative或者绝对定位absolute的方法把第二个圆形定位在右边，

如图

效果图

 4，然后用div画一个正方形用定位方法定位到中心点，再用transform:translate这个属性把图形旋转45度，

如图

效果图

 

5，可以通过@keyframes这个来添加特效

transform:后面自己可以添加自己想要的效果 

完，代码在下面

源码我也就不发了，

同样方法可以弄两个心形