用html和CSS画爱心需要用到很多CSS中的属性，比如border-radius圆角，position定位，animation动画等等，如有不清楚的同学可以看看我之前的文章，或者访问CSS视频教程，希望可以帮助到你！

 

　　实例讲解：爱心可以看作是由两个圆和一个正方形组成，正方形的边长是圆的直径。

 

　　HTML部分：

 

　　用三个div分别表示左边圆、右边圆和正方形

 

　　<divclass="box">

 

　　<divclass="round1"></div>

 

　　<divclass="round2"></div>

 

　　<divclass="bottom"></div>

 

　　</div>

 

　　CSS部分：

 

　　用border-radius:50%将其设置为圆形，用transform:rotate(45deg)将正方形旋转45度，将它和圆组合成心形

 

　　

 

　　

 

　　.box{

 

　　width:180px;

 

　　height:160px;

 

　　margin:100pxauto;

 

　　animation:size1sinfinite;

 

　　animation-direction:alternate;

 

　　transition:1sall;

 

　　border:1pxsolidblack;

 

　　}

 

　　.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);

 

　　}

 

　　@keyframessize{

 

　　0%{

 

　　transform:scale(0.6);

 

　　}

 

　　100%{

 

　　transform:scale(1);

 

　　}

 

　　}






本文转载自中文网