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文件,文件的代码很多,不过要明白 ...
随机推荐
- IOS设计模式六大法则
设计模式的六大原则 单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责 问题由来:类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类 ...
- 剑指Offer19 包含min函数的栈
/************************************************************************* > File Name: 19_MinInS ...
- 实现 kindle 原生系统、多看系弹出注释的通用写法
入手 Kindle 后开始自己做 ePub,之前一直用原生系统,使用的弹出注释代码如下: <p class="P_Footnote" id="ref_footnot ...
- Things make us different
Don't just accumulate knowledge, apply it. You will never really know or understand something until ...
- OpenShare：前所未有的开放性
客户总是面临一个选择:开放的企业门户产品 vs 封闭的企业门户产品 市场上大多数企业门户产品是自成一体的其实也就是封闭的,他们不能和企业目录集成,不能和Exchange集成,不能和SAP集成,不能和L ...
- 零碎记录Hadoop平台各组件使用
>20161011 :数据导入研究 0.sqoop报warning,需要安装accumulo: 1.下载Microsoft sql server jdbc, 使用ie下载,将42版j ...
- ASP.NET MVC 教程
http://msdn.microsoft.com/zh-cn/dd327597.aspx
- Google Play支付校验
关于Google Play支付校验我之前在网上也找过大量的相关资料,发现大多数都是采用publicKey的方式来校验订单,但是在Google Play提供的官方实例中publicKey其实在客户端也是 ...
- 页面多语系自动切换-.resx
实现这个需要应用到微软提供的本地资源文件Resources,实际上就是一种key value的形式. 语言自动切换原理有两种 读取浏览器的语言首选项 根据IP网段进行识别.比如有的人通过VPN连接到 ...
- C#中的 具名参数 和 可选参数
具名参数 和 可选参数 是 C# framework 4.0 出来的新特性. 一. 常规方法定义及调用 public void Demo1(string x, int y) { //do someth ...