还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏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. [原创][FPGA]Quartus实用小技巧（长期更新）

    0. 简介 在使用Quartus软件时,经常会时不时的发现一些小技巧,本文的目的是总结所查阅或者发现到的小技巧,本文长期更新. 1. Quartus中的模板功能 最近在Quartus II的菜单里找到 ...

  2. Careercup | Chapter 6

    6.2 There is an 8x8 chess board in which two diagonally opposite corners have been cut off. You are ...

  3. Redis - 事务操作与详解

    https://blog.csdn.net/J080624/article/details/81669560   写的比较清楚的一个帖子

  4. IntelliJ IDEA出现：java: Compilation failed: internal java compiler error的问题解决

    这两处地方要同时修改成一样的. 参考: http://blog.csdn.net/u011275152/article/details/45242201

  5. BT种子文件文件结构分析（转）

    估计80%以上接触互联网的人都知道bt是什么东西,任何一个用bt下载的人都知道这样一个概念,种子.bt种子就是记录了p2p对等网络中tracker, nodes, files等信息,也就是说,这个种子 ...

  6. 【IntelliJ IDEA】在idea上安装使用svn

    1.在电脑上安装SVN 下载地址:64位SVN下载 然后一路next,安装完成即可. 如果忘记勾选第二个,可以重新点击安装包  重新安装,然后选择modify,然后勾选command line cli ...

  7. Android -- AsyncTask 使用和缺陷

    一.AsyncTask的基本用法 由于AsyncTask是一个抽象类,所以如果我们想使用它,就必须要创建一个子类去继承它.在继承时我们可以为AsyncTask类指定三个泛型参数,这三个参数的用途如下: ...

  8. 浮窗WindowManager view返回和Home按键事件监听

    出于功能需求,需要在所有的view之上显示浮窗,于是需要在WindowManager的View上处理返回键的响应, mFloatingWindowView = layoutInflater.infla ...

  9. Web文件的ContentType类型大全

    ".*"="application/octet-stream"".001"="application/x-001"&qu ...

  10. Python操作MySQL：pymysql和SQLAlchemy

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...