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

标题
标题

二,教程开始,图像是由三个图像合成的,两个圆形,一个正方形,大部分用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:后面自己可以添加自己想要的效果

完,代码在下面

源码我也就不发了,

同样方法可以弄两个心形

经验分享 程序员 微信小程序 职场和发展