CSS-点赞爱心小动画

爱心图片:

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-点赞爱心小动画的更多相关文章
- CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...
- 如何制作网页小动画?——gif or png
一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...
- 纯css实现苹果表盘动画
欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...
- 利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery实现一些小动画一
jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3——制作人物走路的小动画
一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...
- 烂漫爱心表白动画 分类: C# 2014-10-07 19:08 28人阅读 评论(0) 收藏
曾经我说过我会用程序来表达我对你的爱. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
随机推荐
- (72)zabbix监控日志文件 MySQL日志为例
一般情况下,日志最先反映出应用当前的问题,在海量日志里面找到我们异常记录,然后记录下来,并且根据情况报警,大家可以监控系统日志.nginx.Apache.业务日志. 这边我拿常见的MySQL日志做监控 ...
- Inkscape基础
What is Inkscape A program for creating vector graphics For Windows, Mac OS, and Linux Open source F ...
- 第二课:PHP 安装
PHP 安装 您需要做什么? 为了开始使用 PHP,您可以: 找一个支持 PHP 和 MySQL 的 Web 主机 在您自己的 PC 机上安装 Web 服务器,然后安装 PHP 和 MySQL 使用支 ...
- 有关Kali更新问题的解决方法。
近期更新源遭遇诸多不顺,无非是各种依赖问题的报错夹杂着各种稀奇古怪的问题,不过既然是玩Linux,就要做好处理各种疑难杂症的准备.经过了这几天的不断尝试,今天终于解决了更新出错的问题. 本人更新源出现 ...
- JAVA基础篇—抽象类,抽象方法
class Shape package com.shape; public abstract class Shape { double area;// double per;// String col ...
- 使用IAR在开发nordic问题记录
使用IAR在开发nordic的sdk的时候,官方有一段话*****Note for IAR 8 users:(Libraries for IAR 8 require wchar_t to be of ...
- 并查集:POJ1182-食物链(并查集比较高端的应用)
食物链 Time Limit: 1000MS Memory Limit: 10000K Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C ...
- Linux压缩与归档
文件的压缩 aaaaaabbbbccc压缩成为6a4b3c 压缩工具: gzip/gunzip: .gz后缀 只能压缩文件,不能压缩目录,因其不具备归档功能 ...
- 针对NM_CUSTOMDRAW消息的学习
消息的形式:1 窗口消息,2 命令消息,3 WM_NOTIFY消息,4 自定义消息 我们的NM_CUSTOMDRAW消息就是就属于第三种WM_NOTIFY消息,而添加消息映射的方法分为两种: BEGI ...
- SPOJ QTREE4 - Query on a tree IV 树分治
题意: 给出一棵边带权的树,初始树上所有节点都是白色. 有两种操作: C x,改变节点x的颜色,即白变黑,黑变白 A,询问树中最远的两个白色节点的距离,这两个白色节点可以重合(此时距离为0). 分析: ...