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 ...
随机推荐
- sphinx关键字套红
sphinx定义搜索结果,搜索的内容着重显示,可以使用下面代码 <?php /** * Created by PhpStorm. * User: pc00001 * Date: 2015/4/1 ...
- 中国电信物联网平台入门学习笔记7：NB-IOT信号如何检测
NB-IOT设备会因为信号的原因,数据发不出.但数据发不出的原因有很多,这么排除是NB-IOT信号的问题呢?那就需要NB-IOT信号检测装置. 网上的信号检测设备 作为一个常年蜗居在实验室的穷屌丝而言 ...
- How to setup multimedia on CentOS 7
You will need to also install the EPEL repository as nux-dextop depends on this for some of its pack ...
- python - 自动化测试框架 - logger
# -*- coding:utf-8 -*- '''@project: Voctest@author: Jimmy@file: log.py@ide: PyCharm Community Editio ...
- Leetcode 433.最小基因变化
最小基因变化 一条基因序列由一个带有8个字符的字符串表示,其中每个字符都属于 "A", "C", "G", "T"中的任 ...
- Wannafly挑战赛5
珂朵莉与宇宙 时间限制:C/C++ 2秒,其他语言4秒空间限制:C/C++ 65536K,其他语言131072K64bit IO Format: %lld 题目描述 星神是来自宇宙的 所以珂朵莉也是吧 ...
- centos7 install google-chrome
important: Google Chrome support for all 32-bit Linux distributions is deprecated from March, 2016. ...
- JDBC 学习笔记（八）—— ResultSet
JDBC 使用 ResultSet 来封装 SQL 的查询结果,可以将 ResultSet 类比为数据库表的查询结果. 它拥有如下两个性质: 可滚动. 可更新. 这两个性质,是在创建 Statemen ...
- iOS------手势操作(nib文件、纯代码)
总共有六种手势识别:轻击手势(TapGestureRecognizer),轻扫手势 (SwipeGestureRecognizer), 长按手势(LongPressGestureRecognizer) ...
- 【bzoj3252】攻略 贪心+DFS序+线段树
题目描述 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏. 今天他得到了一款新游戏<XX半岛>,这款游戏有n个场景(scene),某 ...