CSS3 animation小动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
padding: 0;
margin: 0;
}
.btn{
width: 200px;
text-align: center;
}
.test{
width: 90px;
height: 60px;
background: url(img/test.png) no-repeat;
margin: 60px;
/*-webkit-animation: run 350ms steps(1) infinite 0s;*/
-webkit-animation: run 350ms steps(5) infinite 0s;
}
/*@-webkit-keyframes run{
0%{
background-position: 0;
}
20%{
background-position: -90px 0;
}
40%{
background-position: -180px 0;
}
60%{
background-position: -270px 0;
}
80%{
background-position: -360px 0;
}
100%{
background-position: -450px 0;
}
}*/
@-webkit-keyframes run{
100%{
background-position: -450px 0;
}
}
</style>
<script>
var speed =350;
var flag = true;
function fast(){
var obj = document.getElementById('flash');
speed-=10;
// console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？
obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"
}
function slow(){
var obj = document.getElementById('flash');
speed+=10;
// console.log(obj.style.webkitAnimation) //为何获取不到？？？？？？
obj.style.webkitAnimation = " run "+speed+"ms steps(5) infinite 0s"
}
function play(){
var obj = document.getElementById('flash');
flag = !flag;
obj.style.webkitAnimationPlayState = flag ? "running" : "paused";
}
</script>
</head>
<body>
<div id='flash' class="test"></div>
<div class="btn"><button onclick="fast()">跑快点</button> <button onclick="slow()">跑慢点</button> <button onclick="play()">暂停/开始</button></div>
</body>
</html>
效果图
CSS3 animation小动画的更多相关文章
- CSS3 animation（动画） 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- CSS3 Animation 帧动画 steps()
@keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- 深入理解CSS3 Animation 帧动画（转）
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- css3的帧动画
概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
随机推荐
- 6. Android框架和工具之 JSON解析
Android进阶笔记17:3种JSON解析工具(org.json.fastjson.gson)
- 【Shell脚本学习19】Shell while循环
while循环用于不断执行一系列命令,也用于从输入文件中读取数据:命令通常为测试条件.其格式为: while command do Statement(s) to be executed if ...
- centos下cp -r 命令可拷贝文件夹
LINUX命令的cp -r 和-R的区别 功能上是等价的.不加-r或者-R的时候,只拷贝文件,不拷贝文件夹:加上后则会拷贝文件夹——包括下一级的子文件夹,以及子文件夹中的子文件夹,余此类推.rm的-R ...
- 【python，排序】几种常用的排序算法，使用python实现
1. 选择排序 -- -- def selectSort(l): for i in range(len(l)): j = i + 1 t_min = l[i] loc_min = i for j in ...
- Hosts文件是什么？
Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的 网址时,系统会首先自动从Hosts文件中寻找对应的IP ...
- hdu 4010 Query on The Trees LCT
支持:1.添加边 x,y2.删边 x,y3.对于路径x,y上的所有节点的值加上w4.询问路径x,y上的所有节点的最大权值 分析:裸的lct...rev忘了清零死循环了两小时... 1:就是link操作 ...
- UIToolbar自定义背景及按钮设置
//1.创建toolbar(MyToolbar继承UIToolbar) _myToolbar = [[MyToolbar alloc]initWithFrame:CGRectMake(kZero, ...
- nodejs4-模块和包
模块和包: 定义模块的方法跟sea.js类似,暴露一个接口也是使用exports. 调用一个接口就是使用require 注意:在引入模块的时候如果是同级目录需要加./,否则会报错 除了可以使用ex ...
- jquery设置元素readonly和disabled(checkbox只读)
jquery api中提供了对元素应用disabled和readonly属性的方法:1,readonly 代码示例: $('input').attr("readonly",&quo ...
- SpringMVC 实现邮件发送功能
配置spring-mail.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns=&q ...