manlili blog

CSS3实现左右摇摆跳动的心动画

发表于 | 分类于

还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏gif制作软件是绿色版的，所以gif动态图心的抖动效果会有点慢而且卡卡的，但是实际效果很棒,不信你可以粘贴代码看看呗）
跳动的心
其实上面的动画类似于我们小时候荡的秋千，也叫作“秋千动画”，一般用在想让用户点击这个图标的时候，不仅仅限制于表白用O(∩_∩)O，比如企业招聘时想让求职者点击投简历的图标进入另一个页面等。
书写这段程序的思路：
（1）先要定义一个动画，在10%，20%，30%…….100%时心形图的不同状态，当然时间段和状态都是看自己的需要设定
（2）调用动画，然后设置为无限死循环播放

主体结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>心动时左右摇摆</title>
        <link type="text/css" rel="stylesheet" href="css/animate.css" />
    </head>
    <body>
        <img class="heart" src="img/heart.png"  />
    </body>
</html>

下面来分析下上面的思路

css3里面translate属性

1
transform: none|transform-functions;

关于transform具体的值如下：

  • none 定义不进行转换。
  • matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
  • translate(x,y) 定义 2D 转换。
  • translate3d(x,y,z) 定义 3D 转换。
  • translateX(x) 定义转换，只是用 X 轴的值。
  • translateY(y) 定义转换，只是用 Y 轴的值。
  • translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
  • scale(x,y) 定义 2D 缩放转换。
  • scale3d(x,y,z) 定义 3D 缩放转换。
  • scaleX(x) 通过设置 X 轴的值来定义缩放转换。
  • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
  • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
  • rotate(angle) 定义 2D 旋转，在参数中规定角度。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
  • skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
  • perspective(n) 为 3D 转换元素定义透视视图。

上面这些测试例子可参考[http://www.w3school.com.cn/cssref/pr_transform.asp]

结合本次跳动心的主题可知用到的是

1
transform:scale(1) rotate(0)

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*定义一个名字叫heartAnimate的动画，实现心形图的放大以及旋转效果*/
@keyframes heartAnimate{ 
    0%,100%{transform:scale(1) rotate(0);}                       /*0%,100%时保持图形的原大小且不旋转*/
    10%,30%{transform: scale(0.9) rotate(3deg);}                  /*10%,30%时图形缩小成0.9倍，并且顺时针旋转3度*/
    20%,40%,60%,80%{transform:scale(1.1) rotate(-3deg);}         /*20%,40%,60%,80%时图形扩大成1.1倍，并且逆时针旋转3度*/
    50%,70%{ transform:scale(1.1) rotate(3deg);}                 /*50%,70%时图形扩大成1.1倍，并且顺时针旋转3度*/
}
@-webkit-keyframes heartAnimate{
    0%,100%{-webkit-transform: scale(1) rotate(0);}
    10%,30%{-webkit-transform:scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-webkit-transform: scale(1.1) rotate(-3deg);}
    50%,70%{-webkit-transform: scale(1.1) rotate(3deg);}
}
@-moz-keyframes heartAnimate{
    0%,100%{-moz-transform:scale(1) rotate(0);}
    10%,30%{-moz-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -moz-transform:scale(1.1) rotate(3deg);}
}
@-o-keyframes heartAnimate{
    0%,100%{-o-transform:scale(1) rotate(0);}
    10%,30%{-o-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -o-transform:scale(1.1) rotate(3deg);}
}
@-ms-keyframes heartAnimate{
    0%,100%{-ms-transform:scale(1) rotate(0);}
    10%,30%{-ms-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -ms-transform:scale(1.1) rotate(3deg);}
}
.heart{
    -webkit-animation: heartAnimate 1s ease infinite;    /*调用名称为heartAnimate的动画，全程1s，速度曲线是ease，无限循环播放*/
    -moz-animation: heartAnimate 1s ease infinite;
    -o-animation: heartAnimate 1s ease infinite;
    -ms-animation: heartAnimate 1s ease infinite;
    animation: heartAnimate 1s ease infinite;
}

上面的程序我的注释也写得很清楚了，感兴趣的可以自己试试看，主要就是css3中scale的放大功能和rotate的旋转功能应用，把握好状态的设置，动画效果还是很Q的.

请我喝杯果汁吧！