还在为无法表达内心澎湃的心情而着急吗？还在为制作跳动的心而烦恼吗？哈哈,今天我就把代码全部奉上，为你们追妹子添点贡献，下面来看最终的动态效果（事先说明一下：我用的截屏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. 2002-2003 ACM-ICPC Northeastern European Regional Contest (NEERC 02)

    B Bricks 计算几何乱搞 题意: 给你个立方体,问你能不能放进一个管道里面. 题解: 这是一道非常迷的题,其问题在于,你可以不正着放下去,你需要斜着放.此时你需要枚举你旋转的角度,来判断是否可行 ...

  2. Office 各版本下载链接

    Office 2007 链接: https://pan.baidu.com/s/1pNJDlafw6KQSlljRUAQtWw 提取码: xoml 密钥:DBXYD-TF477-46YM4-W74MH ...

  3. Wdatepick控件只能选当前时间以前的时间

    WdatePicker限制只能选当天,只能选以前的时间 (1)WdatePicker限制只能选以前的时间(不能选当天): onfocus="WdatePicker({startDate:'% ...

  4. pv，uv

    1.PV PV(page view),即页面浏览量:用户每1次对网站中的每个网页访问均被记录1次.用户对同一页面的多次访问,访问量累计. 2．什么是UV uv(unique visitor),指访问某 ...

  5. DICOM医学图像处理：Orthanc Plugin SDK实现WADO服务

    背景: Orthanc是博主发现的一个很完美的DICOM和HTTP服务端开源软件,前几篇分别介绍了Orthanc的基本使用.Orthanc从0.8.0版本之后给出了Plugin SDK,通过该SDK可 ...

  6. 数据库历险记（三） | 缓存框架的连环炮 数据库历险记（二） | Redis 和 Mecached 到底哪个好？ 数据库历险记（一） | MySQL这么好，为什么还有人用Oracle？ 面对海量请求，缓存设计还应该考虑哪些问题？

    数据库历险记(三) | 缓存框架的连环炮   文章首发于微信公众号「陈树义」,专注于 Java 技术分享的社区.点击链接扫描二维码,与500位小伙伴一起共同进步.微信公众号二维码 http://p3n ...

  7. Django+uwsgi+nginx+angular.js项目部署

    这次部署的前后端分离的项目: 前端采用angular.js,后端采用Django(restframework),他俩之间主要以json数据作为交互 Django+uwsgi的配置可以参考我之前的博客: ...

  8. 汇率换算自然语言理解功能JAVA DEMO

    >>>>>>>>>>>>>>>>>>>>>>>> 欢迎转 ...

  9. mysql 中创建递归函数

    1.在navicat中创建递归函数 BEGIN ) DEFAULT ''; ) default ''; ) default ''; ) default rootId; ; WHILE rootId i ...

  10. Selenium学习（二）入门小例子

    1)打开百度页面 2)输入“hello” 3)点击百度一下按钮 from selenium import webdriver url = "http://" + "www ...