css3 简单动画
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate1")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotatey1")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
{
clearInterval(rotINT)
if (n==360){n=0}
}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
{
clearInterval(rotYINT)
if (ny>=360){ny=0}
}
}
//-->
</script> HTML部分:
<div id="tpn">
<ul class="prenext">
<li class="pre"><a href="/css3/css3_2dtransform.asp" title="CSS3 2D 转换">CSS3 2D 转换</a></li>
<li class="next"><a href="/css3/css3_transition.asp" title="CSS3 过渡">CSS3 过渡</a></li>
</ul>
</div>
css3 简单动画的更多相关文章
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- H5+CSS3简单动画 知识点 汇总
乱入几个: 1.h5的一个语义化标签 figure :用于规定独立的流内容(图像 图表 照片 代码等) figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...
- web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3简单介绍
关于css3我先介绍几个简单的选择器: 先进行设置: 字符串匹配属性选择器: E[alt^="a"] 选择属性中以a开头的元素: E[alt$="a"] 选 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- css3简单几步画一个乾坤图
原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...
随机推荐
- buffer cache中,各个object对象占用的buffer blocks
buffer cache中,各个object对象占用的buffer blocks: COLUMN OBJECT_NAME FORMAT A40 COLUMN NUMBER_OF_BLOCKS FORM ...
- 关于解决读取导入excel某列数字过长的科学计数法格式
因为 客户 需要导入 虚拟商品的卡号 excel已经是文本形式的单元格格式了 但是 到后台 java代码去获取的时候 仍然是 科学计数法格式 先找到以下资料做参考:http://love-66521. ...
- 《30天自制操作系统》05_day_学习笔记
//bootpack.c 完整代码 #include <stdio.h> void io_hlt(void); void io_cli(void); void io_out8(int po ...
- FileInputStream and FileOutputStream
Java FileOutputStream class Java FileOutputStream is an output stream for writing data to a file. If ...
- 树形DP(统计直径的条数 HDU3534)
分析:首先树形dp(dfs计算出每个点为根节点的子树的最长距离和次长距离),然后找出L=dis[u][0]+dis[u][1]最长的那个点u,然后在以u为根节点dfs,统计长度为L的条数:具体做法:把 ...
- AngularJS 全局scope与Isolate scope通信
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...
- JSP里比对单选框或复选框的数值而自动打勾
<table> <tr> <td class="tableleft">状态</td> <td><input typ ...
- struts请求基本类型参数接收
01:导包,web.xml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version ...
- demo06
city_data.xml <?xml version="1.0" encoding="utf-8"?> <resources> < ...
- paper 36 :[教程] 基于GridSearch的svm参数寻优
尊重原创~~~ 转载出处:http://www.matlabsky.com/thread-12411-1-1.html 交叉验证(Cross Validation)方法思想简介http://www.m ...