图文详解如何用html和CSS制作爱心特效

来源：动视网责编：小采时间：2020-11-02 22:12:09

图文详解如何用html和CSS制作爱心特效

图文详解如何用html和CSS制作爱心特效:CSS在页面布局中起到非常重要的作用，CSS不仅可以美化HTML搭建的页面，还可以制作出各种炫酷的效果，作为一个前端人员，你会用CSS画爱心吗？这篇文章就给大家分享如何用HTML和CSS绘制心形，以及CSS3实现爱心特效的代码，有一定的参考价值，感兴趣的朋友可以看

推荐度：

点击下载本文 文档为doc格式

导读图文详解如何用html和CSS制作爱心特效:CSS在页面布局中起到非常重要的作用，CSS不仅可以美化HTML搭建的页面，还可以制作出各种炫酷的效果，作为一个前端人员，你会用CSS画爱心吗？这篇文章就给大家分享如何用HTML和CSS绘制心形，以及CSS3实现爱心特效的代码，有一定的参考价值，感兴趣的朋友可以看

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>

CSS部分：

用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动画实现爱心特效，使爱心可以自动缩放，效果如图：