[摘要]CSS在页面布局中起到非常重要的作用,CSS不仅可以美化HTML搭建的页面,还可以制作出各种炫酷的效果,作为一个前端人员,你会用CSS画爱心吗?这篇文章就给大家分享如何用HTML和CSS绘制心形,以...
CSS在页面布局中起到非常重要的作用,CSS不仅可以美化HTML搭建的页面,还可以制作出各种炫酷的效果,作为一个前端人员,你会用CSS画爱心吗?这篇文章就给大家分享如何用HTML和CSS绘制心形,以及CSS3实现爱心特效的代码,有一定的参考价值,感兴趣的朋友可以看看。
用html和CSS画爱心需要用到很多CSS中的属性,比如border-radius圆角,position定位,animation动画等等,如有不清楚的同学可以看看我之前的文章,或者访问 CSS视频教程,希望可以帮助到你!
实例讲解:爱心可以看作是由两个圆和一个正方形组成,正方形的边长是圆的直径。
HTML部分:
用三个div分别表示左边圆、右边圆和正方形
<div class="box">
<div class="round1"></div>
<div class="round2"></div>
<div class="bottom"></div>
</div>