爱心图片:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#xin{
display: block;
width:100px;
height: 100px;
background-image: url(images/web_heart_animation.png);
background-repeat: no-repeat;
background-color: pink;
background-size: 2900%; //爱心图片的像素大小为2900*100
}
.xin2{
animation: mymoveOK .8s linear;
animation-fill-mode: forwards; //动画结束时固定在最后一帧
animation-timing-function: steps(28); //非常重要的属性 没有TA,动画就no OK
}
@keyframes mymoveOK{
from{background-position: left;}
to{background-position: right;}
}
</style>
</head>
<body>
<div class="dianzanXin">
<div id="xin"></div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script>
$("#xin").on("click",function(){
$(this).addClass("xin2")
})
</script>
</body>
</html>

CSS-点赞爱心小动画的更多相关文章

  1. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  2. 如何制作网页小动画?——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  3. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  4. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  5. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  6. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. jquery实现一些小动画一

    jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. CSS3——制作人物走路的小动画

    一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...

  9. 烂漫爱心表白动画 分类: C# 2014-10-07 19:08 28人阅读 评论(0) 收藏

    曾经我说过我会用程序来表达我对你的爱. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. (72)zabbix监控日志文件 MySQL日志为例

    一般情况下,日志最先反映出应用当前的问题,在海量日志里面找到我们异常记录,然后记录下来,并且根据情况报警,大家可以监控系统日志.nginx.Apache.业务日志. 这边我拿常见的MySQL日志做监控 ...

  2. Inkscape基础

    What is Inkscape A program for creating vector graphics For Windows, Mac OS, and Linux Open source F ...

  3. 第二课:PHP 安装

    PHP 安装 您需要做什么? 为了开始使用 PHP,您可以: 找一个支持 PHP 和 MySQL 的 Web 主机 在您自己的 PC 机上安装 Web 服务器,然后安装 PHP 和 MySQL 使用支 ...

  4. 有关Kali更新问题的解决方法。

    近期更新源遭遇诸多不顺,无非是各种依赖问题的报错夹杂着各种稀奇古怪的问题,不过既然是玩Linux,就要做好处理各种疑难杂症的准备.经过了这几天的不断尝试,今天终于解决了更新出错的问题. 本人更新源出现 ...

  5. JAVA基础篇—抽象类,抽象方法

    class Shape package com.shape; public abstract class Shape { double area;// double per;// String col ...

  6. 使用IAR在开发nordic问题记录

    使用IAR在开发nordic的sdk的时候,官方有一段话*****Note for IAR 8 users:(Libraries for IAR 8 require wchar_t to be of ...

  7. 并查集:POJ1182-食物链(并查集比较高端的应用)

    食物链 Time Limit: 1000MS Memory Limit: 10000K Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C ...

  8. Linux压缩与归档

    文件的压缩     aaaaaabbbbccc压缩成为6a4b3c     压缩工具:     gzip/gunzip: .gz后缀         只能压缩文件,不能压缩目录,因其不具备归档功能   ...

  9. 针对NM_CUSTOMDRAW消息的学习

    消息的形式:1 窗口消息,2 命令消息,3 WM_NOTIFY消息,4 自定义消息 我们的NM_CUSTOMDRAW消息就是就属于第三种WM_NOTIFY消息,而添加消息映射的方法分为两种: BEGI ...

  10. SPOJ QTREE4 - Query on a tree IV 树分治

    题意: 给出一棵边带权的树,初始树上所有节点都是白色. 有两种操作: C x,改变节点x的颜色,即白变黑,黑变白 A,询问树中最远的两个白色节点的距离,这两个白色节点可以重合(此时距离为0). 分析: ...