爱心图片：

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. idea 启动不了

    idea 更新了新版本.  破解步骤安排完了之后 ,  发现怎么也启动不了.  没有任何提示. 于是为了查看错误信息去idea的安装目录bin下用idea.bat脚本启动发现了如下错误: 在idea6 ...

  2. python 爬取知乎图片

    先上完整代码 import requests import time import datetime import os import json import uuid from pyquery im ...

  3. css3属性：美化表单、点击元素产生的背景与边框怎么去掉，滚动回弹效果

  4. uvm transaction modeling

    1.what is transaction? network transactions tcp/ip wifi 3g/4g bus transactions amba-ahb/apb/axi pci/ ...

  5. linux的一些权限的操作 chmod

    u ---属主 g ---用户组 o ---其他组 + ----赋予权限 - ----取消权限 = ----赋予权限并取消以前的权限 r = 4   //读 w =2   //写 x =1   //执 ...

  6. Python之路--序列化

    序列化的目的 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方 3.使程序更具有维护性 json json多语言通用 四个功能:dumps.dump.loads.load # ...

  7. Django之用户认证

    用户认证组件简介 功能:用session记录登录验证状态 前提:必须使用django自带的auth_user表.那这里有的同学就会有疑问了,自己不能创建自己的用户表吗? 当然可以,用户认证组件虽然只针 ...

  8. LeetCode（303）Range Sum Query - Immutable

    题目 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclus ...

  9. stm32定时器学习二——PWM设置

    /* STM32 嵌入式学习入门(5)——PWM的实现 上一篇博文介绍了定时器和PWM的基本的原理,本篇博文从代码层面来介绍PWM的具体实现.同样,还是以博主所用的开发板——正点原子开发板STM32F ...

  10. hdu-2544 最短路（最短路）

    Time limit1000 ms Memory limit32768 kB   在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到 ...