CSS实现跳动的红心效果

初次学习尝试

圆角属性： border-radius

• 四个值 top-left top-right bottom-right bottom-left;
  （注：当四个值缺少某一个值的时候，由对立面的值进行补充）

平移 transform:translate(x,y)

• x 表示水平方向移动
• y 表示垂直方向移动

旋转 transform:rotate(角度)

• deg 角度单位 0-360deg

缩放 transform:scale(x,y)

• x 表示的水平方向的缩放

• y 表示的垂直方向的缩放

• 1 表示原图形大小，不缩放

• 比1小 缩小

• 比1大 放大

关键帧动画

• 创建动画

  • @keyframes

  @keyframes 动画名称{
  	0%{}      /*动画的起始状态*/
  	...
  	100%{}    /*动画的完成状态*/
  }
  

• 调用动画 animation

  animation: 动画名称  完成动画的时间（s/ms） 曲线速度  延迟时间  动画播放的次数  是否反向;
  

  • 动画名称 自定义
  • 动画的时间 s/ms
  • 曲线速度 ease-in-out 慢入慢出 linear 匀速
  • 延迟时间 s/ms
  • 动画播放的次数 number/infinite无限次
  • 是否反向 alternate

思路

红心由两个圆一个正方形拼接而成，将红心整体放入一个大的div中，动画效果在大的div中实现

代码实现

css样式部分

<style>
    .wrap{
        
        width: 80px;
        height: 80px;
    /* 调用动画  动画名称  完成动画的时间 曲线速度 动画播放次数 是否反向*/
        animation: scale 0.5s linear infinite alternate;
    }
    .circle{
        background-color: red;
        width: 80px;
        height: 80px;
        border-radius: 50%;
   
    }
    .two{
        transform: translate(52px,-78px);
    }
    .square{
        background-color: red;
        width: 80px;
        height: 80px;
                  /*旋转              平移*/
        transform: rotate(49deg) translate(-85px,-105px);
    }
    @keyframes scale{   /*创建动画*/
        0%{
            transform: scale(1);  /*缩放transform:scale(x,y)   x 表示的水平方向的缩放,y 表示的垂直方向的缩放*/
        }                          /*1 表示原图形大小，不缩放*/
        100%{
            transform: scale(0.8);/*比1小  缩小, 比1大  放大 */
        }
    }
    
    </style>

body部分

<div class="wrap">
        <div class="circle one"></div>
        <div class="circle two"></div>
        <div class="square"></div>
    </div>