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

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

教大家用html/css简单写一个心形,表白必学_第1张图片 标题

 

 

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

1,首先建一个大的div

教大家用html/css简单写一个心形,表白必学_第2张图片

效果图

教大家用html/css简单写一个心形,表白必学_第3张图片

 

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

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

教大家用html/css简单写一个心形,表白必学_第4张图片

 效果图

教大家用html/css简单写一个心形,表白必学_第5张图片

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

如图

教大家用html/css简单写一个心形,表白必学_第6张图片

效果图

教大家用html/css简单写一个心形,表白必学_第7张图片

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

如图

教大家用html/css简单写一个心形,表白必学_第8张图片

效果图

教大家用html/css简单写一个心形,表白必学_第9张图片

 

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

教大家用html/css简单写一个心形,表白必学_第10张图片

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

完,代码在下面

教大家用html/css简单写一个心形,表白必学_第11张图片

源码我也就不发了,

同样方法可以弄两个心形

 

你可能感兴趣的:(前端)