CSS3实现心跳效果

晚上不怎么想看书，做了这个心跳效果，主要用了CSS3，也顺带复习一下。

先上html结构，结构很简单

<div class="heart">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <div class="bottom"></div>
    </div>

三个div的目的就是通过平移旋转调整边框变成?形~
CSS结构如下：

*{
    padding:0;
    margin:0;
}
body{
    background-color: black;
}
/*实现缩放效果的时候对父元素操作即可*/
.heart{
    margin:100px auto; 
    width:200px;
    height:200px;
    position: relative;
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.heart div{
    /* 通过父元素找到所有相同的子元素 */
    width:100%;
    height:100%;
    background-color: pink;
    position: absolute;
    /*  一定得配合相对的元素来进行绝对定位 */
    /* 相对父元素进行绝对定位 */
    /* 脱离了文档流 */
    animation-name: shadow;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.topLeft{
    /* 先平移  再旋转 */
    transform: translate(-100px,0) rotate(-45deg); 
}
.topRight{
    transform: translate(100px,0) rotate(45deg);
}
.bottom{
    transform: translate(0,100px) rotate(45deg);
}
.topLeft,.topRight{
    border-radius: 105px 105px 0 0 ;
    /* 左上 右上 左下 右下 */
}
/* 动画： 定义一个关键帧 为元素去调用这个动画  */
/* 关键帧 每一步中所执行的效果 */
@keyframes shake{
    0%{
        transform:scale(0.9,0.9);
        /* 对当前的效果进行缩放 */
    }
    100%{
        transform:scale(1.2,1.2);
    }
}
@keyframes shadow{
    0%{
        box-shadow: 0 0 0 pink;
    }
    100%{
        box-shadow: 0 0 50px pink;
    }
}

CSS3 2D转换 transform

可以对元素进行移动、缩放、拉伸、转动、拉长

• translate()

transform:translate(50px,100px)

右下为正，左上为负

• rotate()

transform:rotate(50deg)

顺时针旋转

• scale()

transform:scale(2,4)

按照宽高放大倍数

• skew()

transform:skew(30deg,20deg)

使元素按照X轴，Y轴翻转给定的角度

• matrix()
  matrix() 方法把所有 2D 转换方法组合在一起。
  matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 @keyframes 规则

在CSS3中创建动画，需要学习@keyframes规则
要使得动画能够在页面中展示，三个要点

• 动画的名称需要规定
• 动画的时长需要规定
• 元素要调用动画名称

动画属性

• animation 所有动画属性的简写属性
• animation-name 规定@keyframe名称
• animation-duration 规定动画完成的时间
• animation-iteration-count 规定动画被播放的次数
  默认为1，infinite:无限次播放
• animation-timing-function 规定动画的速度曲线

animation-timing-function:linear;//从头到尾速度相同
animation-timing-function:easy;//默认，从低速加快，在结束前变慢
animation-timing-function:ease-in;//动画以低速开始
animation-timing-function:ease-out;//动画以低速结束
animation-timing-function:cubic-bezier(n,n,n,n)

• animation-direction定义是否应该轮流反向播放动画
  normal:默认值，正常播放
  alternate:轮流反向播放

div{
width:100px;height:100px;
background:red; position:relative;
animation-name:myfirst;//动画名称
animation-duration:5s;//动画完成时间
animation-timing-function:linear;//动画的速度设置为匀速
animation-delay:2s;//动画从何时开始
animation-iteration-count:infinite;//动画的播放次数无限
animation-direction:alternate;//动画轮流反向播放
animation-play-state:running;//规定动画正在运行
}
@keyframes myfirst{
0%{background:red;left:0px; top:0px}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}