如何用css做一个爱心

html-css080

如何用css做一个爱心,第1张

心形的话可以通过这样来实现.heart{position:relativewidth:100pxheight:100pxmargin:100px}.heart:before,.heart:after{position:absolutecontent:""display:blockwidth:30pxheight:50pxborder-radius:30px30px00background:#F00}.heart:before{-webkit-transform:rotate(-45deg)}.heart:after{right:56px-webkit-transform:rotate(45deg)}

在电脑上用代码弄爱心方法如下:

1、打开运行电脑中安装的dreamware软件,打开“文件”菜单中的“新建”功能,创建一个新的HTML文件。

2、在body标签中加入如下的html代码,设置显示爱心的对象。

3、在head标签中添加css样式标签<style>,并写入CSS样式,把爱心的对象变成红色的方块。

4、给这个元素设置伪元素CSS样式。

5、这个爱心的一半就出来了,再给它进行一下角度的45度旋转。

6、接下来只需要再添加另外一边的爱心,再把两个叠加在一起就完成了。