js 控制 css3高级运动 keyframes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var arr=[-,,-,];
var i=;
box.onclick=function(){
var ready=false;
i++;
var oH=document.getElementsByTagName('head')[];
var oS=document.createElement('style');
oH.appendChild(oS);
oS.innerHTML=
'@keyframes rotate{'+
'0%{'+
'transform: rotate('+arr[i%]+'deg);'+
'}'+
'100%{'+
'transform: rotate(-'+arr[i%]+'deg);'+
'}'+
'}';
box.style.animation='1s rotate linear';
box.addEventListener('animationend',function(){
if(ready)return;
ready=true;
document.getElementsByTagName('head')[].removeChild(oS);
},false);
console.log(oS.innerHTML);
}; };
</script>
</head>
<body>
<div id="box" style="background:red; width:100px; height:100px; margin:50px auto;"></div>
</body>
</html>
js 控制 css3高级运动 keyframes的更多相关文章
- css3高级运动keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS控制CSS3，添加浏览器兼容前缀
不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...
- 如何方便的控制css3动画开始时间点与持续时间
一般我们在控制css3 animate动画时可以通过简写以减少代码量,只要在需要动画的元素上追加一下类名就可以了,如下例子 /*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-a ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- js、css3实现图片的放大效果
今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mous ...
- css3动画（@keyframes和animation的用法）
animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...
- SlimerJS – Web开发人员可编写 JS 控制的浏览器
SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器.它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机 ...
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
随机推荐
- 几个常见的布局的多种实现方式及margin负值总结
第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...
- C#查找以某个字母开头另一字母结尾的字符串
using System; using System.Text.RegularExpressions; namespace ConsoleApplication1 { class Program { ...
- Launcher 壁纸
0.添加壁纸: 在给系统换默认的壁纸的时候,需要修改一些地方: 首先是默认的壁纸,这个是在framework中配置的,所以要修改framework中找到drawable-nodpi(这个文件夹中的内容 ...
- IOS 关于开发的APP跳转第三方应用的心得
昨天晚上自己做了个APP,想做个功能可以去跳转到手机上的微博,微信.找了好些资料,下面总结下自己的心得. 跳转的核心代码如下: if ([[UIApplication sharedApplicatio ...
- collections系列
一.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 c = Counter('abcdeabcdabcaba') prin ...
- Linux mint 14输入法问题
新安装了Linux mint 14,莫名其妙地没有了中文输入法,安装并设置IBUS为默认输入法,但怎么也没反应.点击输入法图标,上面显示“No input window”,其实这不关输入法自身程序和设 ...
- Eclipse快捷键大全
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- windows 下面安装npm
npm(简称:Node Packaged Modules)是nodejs官方未nodejs定制的一个工具,是Node.js的包管理器,通过npm可以下载安装nodejs的模块包,nodejs有很多优秀 ...
- Matlab绘图函数一览
要查看Matlab所有绘图函数,请从Matlab主界面菜单查看“绘图目录”,或从Matlab帮助文档查看“Types of MATLAB Plots”(在线版本).本文的图和英文解释摘自Matlab帮 ...
- tornado中self.write() 写list
tornado源码中不支持在self.write()中直接传入list对象,源代码如下 def write(self, chunk): if self._finished: raise Runtime ...