html+css编写简单构造跳动爱心

目录

一.主要思路是

二.完整参考代码:

三.附上部分参考注释

四.最终效果


 

一.主要思路是

构造一个大盒子,里面放left、right、bottom三个小盒子,并将三个盒子设置好边框宽度、高度、弧度达到想要的形状(大致为上面两个圆下面一个矩形),为三个小盒子设置好背景色和阴影效果,最后为其设置动画效果

html+css编写简单构造跳动爱心_第1张图片

二.完整参考代码:




    
    简易跳动爱心
    


    

三.附上部分参考注释

当然也可以尝试用用z-index属性来设置重叠效果是否满意




   
    跳动爱心
   


   


       

       

       

   


四.最终效果

html+css编写简单构造跳动爱心_第2张图片

 

 

 

你可能感兴趣的:(Web前端,css,html,css3,html5,前端)