爱心图片：

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. sphinx中文入门指南 (转自sphinx中文站)

    Sphinx中文入门指南 wuhuiming<blvming在gmail.com>,转载请注明来源和作者 最后修改:2010年1月23日 1.简介 1.1.Sphinx是什么 1.2.Sp ...

  2. 【php】 phpword下载文件问题

    这个问题是在 科锐国际 工作过程中发现的 word文档的名字(有汉字和空格)在windows系统上遍历是查不到文件的,但是在linux系统上市可以的压缩包里面的中文名word文档,如果出现汉字和空格, ...

  3. python将excel数据写入数据库，或从库中读取出来

    首先介绍一下SQL数据库的一些基本操作: 1创建 2删除 3写入 4更新(修改) 5条件选择 有了以上基本操作,就可以建立并存储一个简单的数据库了. 放出python调用的代码: 此处是调用dos 操 ...

  4. python 程序小测试

    python 程序小测试 对之前写的程序做简单的小测试 ... # -*- encoding:utf-8 -*- ''' 对所写程序做简单的测试 @author: bpf ''' def GameOv ...

  5. day22-python之模块

    1.os import os # print(os.getcwd()) # os.chdir("..") # print(os.getcwd()) # os.makedirs('d ...

  6. Can Japan stand up to US request to contain China?

    From Global Times Two days before US President Donald Trump's visit to Japan, A fake news story caug ...

  7. GoF23种设计模式之行为型模式之观察者模式

    一.概述        定义对象之间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.二.适用性1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面的时 ...

  8. cpu位图

    SMP处理器中要用到cpu位图,用来维护系统内CPU的状态信息,具有代表性的有: cpu_possible_map.cpu_online_map.cpu_present_map. static DEC ...

  9. Linux之ssh服务介绍

    一.什么是SSH? 简单说,SSH(Secure Shell Protocol)是一种网络协议,用于计算机之间的加密登录.在默认状态下SSH服务提供俩个服务功能,一个是提供类似telnet远程联机服务 ...

  10. C#中的扩展方法详解

    “扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.”这是msdn上说的,也就是你可以对String,Int,DataRow,DataTable等这些类 ...