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 ...
随机推荐
- 如何用纯 CSS 创作一组昂首阔步的圆点
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejrMKe 可交互视频 ...
- destoon 自定义session丢失
destoon 在使用session之前 应该实例化 $session = new dsession(); destoon通过配置文件加载了不同session存储方式.如果你使用session的页面 ...
- python学习博客推荐
https://www.liaoxuefeng.com/
- Python9-网络编程-day30
# 由于不同机器上的程序要通信,才产生了网络# server# client# 端口 找到的程序# 在计算机上,每一个需要网络通信的程序,都会开一个端口# 在同一时间只会有一个程序占用一个端口# 不可 ...
- UVALive - 8273 Assigning Frequencies （搜索 ）
n个点的一张图,问能否给每个点染上三种颜色中的一种,使得没有相邻的点颜色相同? n <= 35. Sample Input 4 6 6 0 3 1 5 3 2 2 5 0 4 1 0 7 12 ...
- HDU：4185-棋盘游戏
棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...
- 并查集：CDOJ1594-老司机的奇幻漂流 (食物链)
老司机的奇幻漂流 UESTC - 1594 Problem Description 老司机在救出了女票之后,就和她在全世界旅游,有一天,他们来到了一个神奇的小岛上. 这个小岛上有三种动物,他们互相克制 ...
- POJ2594拐点弯的二分
开始读题没理解题意,以为就是覆盖,可是怎么交都不对... 我就气愤了,结果去百度了一下发现奶奶的这题的机器人是可以隔点瞭望的,例如1->2->3.2->4.5->2 这个图 ...
- 贪心 - [POI2006]ORK-Ploughing
[POI2006]ORK-Ploughing 描述 Byteasar 想耕种他那块矩形的田,他每次能耕种矩形的一边(上下左右都行),在他每次耕完后,剩下的田也一定是矩形,每块小区域边长为 1,耕地的长 ...
- Sonar - 部署常见问题及解决方法
1. sonarqube启动报错,查看es.log如下: 问题原因:sonarqube不能使用root用户启动 解决方法: (1)更改sonarqube所属用户权限 chown -R gold:gol ...