怎么用html和CSS制作爱心特效

这篇文章主要介绍怎么用html和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);

　　}

　　}

以上是“怎么用html和CSS制作爱心特效”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！