还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏gif制作软件是绿色版的，所以gif动态图心的抖动效果会有点慢而且卡卡的，但是实际效果很棒,不信你可以粘贴代码看看呗）

下面把心的png图也贴出来，感兴趣的可以右键另存为试试.

其实上面的动画类似于我们小时候荡的秋千，也叫作“秋千动画”，一般用在想让用户点击这个图标的时候，不仅仅限制于表白用O(∩_∩)O，比如企业招聘时想让求职者点击投简历的图标进入另一个页面等。

书写这段程序的思路：

（1）先要定义一个动画，在10%，20%，30%.......100%时心形图的不同状态，当然时间段和状态都是看自己的需要设定

（2）调用动画，然后设置为无限死循环播放

一、先来看看HTML代码：

<!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>

二、接着来看CSS样式（主要是CSS3）

/*定义一个名字叫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哒.

CSS3学习笔记（2）—左右跳动的红心的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  4. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  5. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  6. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  7. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  8. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

  9. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

随机推荐

  1. 洛谷—— P1134 阶乘问题

    https://www.luogu.org/problemnew/show/P1134 题目描述 也许你早就知道阶乘的含义,N阶乘是由1到N相乘而产生,如: 12! = 1 x 2 x 3 x 4 x ...

  2. nfs详解及实现全网备份

    1.统一hosts cat /etc/hosts 172.16.1.5 lb01 172.16.1.6 lb02 172.16.1.7 web02 172.16.1.8 web01 172.16.1. ...

  3. ORACLE MOS 翻译

    http://blog.csdn.net/msdnchina/article/details/53174196

  4. fastscript增加三方控件之二

    fastscript增加三方控件之二 unit fs_BsDataSet; interface {$i fs.inc} uses SysUtils, Classes, fs_iinterpreter, ...

  5. 邁向IT專家成功之路的三十則鐵律 鐵律二十九 IT人富足之道-信仰

    天地自然的循環法則,讓每一個人都必須經歷生.老.病.死.喜.怒.哀.樂,然而至始至終無盡的煩惱總是遠多於快樂,因此筆者深信每一個人在一生當中,都必須要有適合自己的正確信仰,他可以在你無法以物質力量來解 ...

  6. DevExpress打印功能介绍 z

    一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...

  7. C#串口通信发送数据

    1 发送数据 需要2个串口 http://www.openedv.com/thread-228847-1-1.html 下载源文件 File_Protocol_Test.rar

  8. 记事本中写c/c++程序在Windows下运行

     1.在桌面新建一个1.c,内容例如以下: 2．打开cmd命令行窗体,进入CodeBlock安装文件夹下的:E:\Installed\CodeBlocks\MinGW.然后运行mingwvars. ...

  9. Nginx 第三方模块的安装以及一致性哈希算法的使用

    Nginx 第三方模块的安装以及一致性哈希算法的使用 第三方模块安装方法总结: 以ngx_http_php_memcache_standard_balancer-master为例 1:解压 到 pat ...

  10. WPF03(样式)

    说起样式,大家第一反应肯定是css,好的,先上一段代码. 1 html{border:0;} 2 ul,form{margin:0; padding:0} 3 body,div,th,td,li,dd ...