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

這篇文章主要介紹怎么用html和CSS制作愛心特效，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　HTML部分：

　　用三個(gè)div分別表示左邊圓、右邊圓和正方形

　　<divclass="box">

　　<divclass="round1"></div>

　　<divclass="round2"></div>

　　<divclass="bottom"></div>

　　</div>

　　CSS部分：

　　用border-radius:50%將其設(shè)置為圓形，用transform:rotate(45deg)將正方形旋轉(zhuǎn)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制作愛心特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！