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 ...
随机推荐
- PHP四种序列化方案
原文地址:https://t.ti-node.com/thread/... 数据的序列化是一个非常有用的功能,然而目测很多人跟我一样,在刚接触这玩意的时候压根就不理解这货色到底是干啥用的,反正老师说了 ...
- 如何用纯 CSS 创作一副国际象棋
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- poj-2524 ubiquitous religions(并查集)
Time limit5000 ms Memory limit65536 kB There are so many different religions in the world today that ...
- 彻底卸载gedit
$ sudo apt-get purge gedit gedit-plugins$ sudo apt-get autoremove
- HDU 5378 树上的概率DP Leader in Tree Land
官方题解: 可以用求概率的思想来解决这个问题.令以i号节点为根的子树为第i棵子树,设这颗子树恰好有sz[i]个点.那么第i个点是第i棵子树最大值的概率为1/sz[i],不是最大值的概率为(sz[i]- ...
- 深入Python底层,谈谈内存管理机制
说到内存管理,就先说一下垃圾回收吧.垃圾回收是Python,Java等语言管理内存的一种方式,说的直白些,就是清除无用的垃圾对象.C语言及C++中,需要通过malloc来进行内存的申请,通过free而 ...
- session属性的清除和非法登录
有的项目会将登录用户的资料存于session的一个属性中,这样方便获取一些数据使用,但是用户退出时需要将session的这个属性清除,一面造成一些不必要的麻烦,但是有些时候,在后台清除了这个属性,在拦 ...
- 玩App怎么赚钱(二)
紧接上篇文章,谈到App前赚钱的一些门道,其实还有很多了,需要你自己去挖掘App到底有什么价值.有价值的东西就能形成交易,而交易的过程中是用金钱作为流通手段,所以说赚钱没那么高大上,它的本质就是价值的 ...
- mongodb系统出错。 发生系统错误 1067。 进程意外终止。
MongoDB安装目录\data\将此文件夹下的mongod.lock删除 mongod.exe --config E:\ruanjian\MongoDB\mongod.cfg --remove mo ...
- 爬虫Scrapy框架-Crawlspider链接提取器与规则解析器
Crawlspider 一:Crawlspider简介 CrawlSpider其实是Spider的一个子类,除了继承到Spider的特性和功能外,还派生除了其自己独有的更加强大的特性和功能.其中最显著 ...