爱心图片：

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. java工作环境配置jdk，idea

    下载 jdk 1.8 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置环境 ...

  2. [提供可行性脚本] RHEL/CentOS 7 多节点SSH免密登陆

    实验说明: 在自动化部署时,会经常SSH别的机器去操作,然而每次的密码认证却很令人烦躁,尤其是很长的密码,因此SSH免密登陆就显得必不可少: 在机器数目很多的时候,使用更过的往往是Ansible分发并 ...

  3. ActiveXObject

    只有IE浏览器才支持这个构造函数,可以用这个来判断,当前是否为IE浏览器 var isIE=!!window.ActiveXObject; 在IE的不同版本下,要创建XHR对象,也需要通过这个构造函数 ...

  4. destoon 给超级管理员系统权限（管理员管理，日志管理等）

    destoon 后台某些系统权限除了网站创始人之外其他超管事没有权限的,现需要给其他超级管理员添加普通管理员的权限. 1.首先  admin/global.func.php  admin_check函 ...

  5. 【 android】When an app is installed on the external storage

    When an app is installed on the external storage: The .apk file is saved to the external storage, bu ...

  6. JAVA基础篇—抽象类，抽象方法

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

  7. machine_desc

    每一个machine,都要定义一个自己的machine_desc结构,该结构定义了该machine的一些最基本的特性. struct machine_desc { unsigned int nr; / ...

  8. LeetCode（162） Find Peak Element

    题目 A peak element is an element that is greater than its neighbors. Given an input array where num[i ...

  9. CSS效果小结

    效果属性 1.box-shadow(盒子阴影) 示例 加上 box-shadow 内阴影 复杂例子 阴影的形状跟原来的形状是一样的 结果: box-shadow 作用:1.营造层次感(立体感)2.充当 ...

  10. HDU 5528 Count a * b 欧拉函数

    题意: 定义函数\(f(n)\)为\(i \cdot j \not\equiv 0 \; (mod \; n)\)的数对\((i,j)\)的个数\((0 \leq i,j \leq n)\) \(g( ...