css在页面布局中起到非常重要的作用，css不仅可以美化html搭建的页面，还可以制作出各种炫酷的效果，作为一个前端人员，你会用css画爱心吗？这篇文章就给大家分享如何用html和css绘制心形，以及css3实现爱心特效的代码，有一定的参考价值，感兴趣的朋友可以看看。
用html和CSS画爱心需要用到很多CSS中的属性，比如border-radius圆角，position定位，animation动画等等，如有不清楚的同学可以看看我之前的文章，或者访问 CSS视频教程，希望可以帮助到你！
实例讲解：爱心可以看作是由两个圆和一个正方形组成，正方形的边长是圆的直径。
HTML部分：
用三个div分别表示左边圆、右边圆和正方形
<div> <div></div> <div></div> <div></div> </div>
CSS部分：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
用border-radius:50%将其设置为圆形， 用transform:rotate(45deg)将正方形旋转45度，将它和圆组合成心形
.box{
width:180px;
height:160px;
margin:100px auto;
animation:size 1s infinite;
animation-direction:alternate;
transition:1s all;
border: 1px solid black;
}
.round1{
width:100px;
height:100px;
border-radius:50%;
background-color:hotpink;
left: 0;
top: 0;
position:absolute;
}
.round2{
width:100px;
height:100px;
border-radius:50%;
background-color:hotpink;
position:absolute;
right: 0;
top: 0;
}
.bottom{
width:100px;
height:100px;
background-color:hotpink;
position:absolute;
top:40px;
left:40px;
transform:rotate(45deg);
}
@keyframes size{
0%{
transform:scale(0.6);
}
100%{
transform:scale(1);
}
}
最后用CSS3中的animation动画实现爱心特效，使爱心可以自动缩放，效果如图：
以上给大家介绍了如何用html和CSS画爱心，比较简单，初学者一定要自己动手尝试，看看你能不能绘制出爱心，希望这篇文章对你有所帮助！更多相关视频教程请访问 CSS3视频教程
更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
