还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏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. BZOJ 1008: [HNOI2008]越狱 组合数学

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1008 题解: 就很傻逼的组合数学啊... $$ans=M^N-M*(M-1)^{(N-1) ...

  2. Maven出现User setting file does not exist ...\.m2\setting.xml的问题解决（同时也解决用户.m2目录下无setting.xml文件）

    如果Eclipse中出现User setting file does not exist ...\.m2\setting.xml这样的问题,解决方法如下: 1.拷贝%M2_HOME%/conf/set ...

  3. iOS应用崩溃日志揭秘

    这篇文章还可以在这里找到 英语 Learn how to make sense of crash logs! 本文作者是 Soheil Moayedi Azarpour, 他是一名独立iOS开发者. ...

  4. Android图片缓存之初识Glide（三）

    前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...

  5. Android自己定义实现循环滚轮控件WheelView

    首先呈上效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

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

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

  7. CSDN - 进程结束后new出的内存会回收吗？

    http://blog.csdn.net/stanjiang2010/article/details/5386647     关键词:内存回收  

  8. UVA 610 - Street Directions（割边)

    UVA 610 - Street Directions option=com_onlinejudge&Itemid=8&page=show_problem&category=5 ...

  9. eclipse的快捷键(常用)

    1. Ctrl+O 显示类中方法和属性的大纲,能快速定位类的方法和属性,在查找Bug时非常有用. 2. Ctrl+M 窗口最大化和还原,用户在窗口中进行操作时,总会觉得当前窗口小(尤其在编写代码时), ...

  10. ORACLE 36进制和10进制，互相转换函数

    第一部分 --36转10进制 create or replace function f_36to10 (str varchar) return int  is returnValue int;   s ...