还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏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. 一起来学Spring Cloud | 第六章：服务网关 ( Zuul)

    本章节,我们讲解springcloud重要组件:微服务网关Zuul.如果有同学从第一章看到本章的,会发现我们已经讲解了大部分微服务常用的基本组件. 已经讲解过的: 一起来学Spring Cloud | ...

  2. 浅析 JavaScript 中的闭包（-------------------------------------------）

    一.前言 对于 JavaScript 来说,闭包是一个非常强大的特征.但对于刚开始接触的初学者来说它又似乎是特别高深的.今天我们一起来揭开闭包的神秘面纱.闭包这一块也有很多的文章介绍过了,今天我就浅谈 ...

  3. Intent 传递对象

    方法: 可以让这个要传递的对象所属类实现Serializable或者Parcelable接口, 然后利用onCreate函数中的Bundle参数作为载体,传递这个对象. 例如: <span st ...

  4. 为了安全，linux下如何使用某个用户启动某个进程？

    安全里有个原则,叫最小权限原则 根据这个原则,对于启动某个应用或者进程,应该赋予其最小权限,根据应用权限要求,创建一个相应权限的用户,赋予其应用相应的权限,然后使用这个用户启用这个应用 如何使用某个用 ...

  5. C# 获取COM对象 ProgId ClsId

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/fe262fdd-a93f-427e-8771-2c64e7ac3064/getting- ...

  6. Lazarus安装使用

    Lazarus安装使用 最后还是安装了Lazarus: 安装之后,新建了项目,还引入了Unit,就可以跑了: 学习:http://tieba.baidu.com/p/3164001113 progra ...

  7. HDU 5289 Assignment(单调队列)

    题意:给T足数据,然后每组一个n和k,表示n个数,k表示最大同意的能力差,接下来n个数表示n个人的能力,求能力差在k之内的区间有几个 分析:维护一个区间的最大值和最小值,使得他们的差小于k,于是採用单 ...

  8. 【翻译自mos文章】使用asmcmd命令在本地和远程 asm 实例之间 拷贝asm file的方法

    使用asmcmd命令在本地和远程 asm 实例之间 拷贝asm file的方法 參考原文: How to Copy asm files between remote ASM instances usi ...

  9. Vue.js 使用cordova camera插件调取相机

    本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作.具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 co ...

  10. C++11 并发指南二(std::thread 详解)（转）

    上一篇博客<C++11 并发指南一(C++11 多线程初探)>中只是提到了 std::thread 的基本用法,并给出了一个最简单的例子,本文将稍微详细地介绍 std::thread 的用 ...