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>

  

时间: 2024-11-05 13:42:18

css3 简单动画的相关文章

CSS3简单动画

css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=&qu

H5+CSS3简单动画 知识点 汇总

乱入几个:  1.h5的一个语义化标签 figure :用于规定独立的流内容(图像 图表 照片 代码等) figcapition:与figure配套使用,用于标签定义figure元素标题 2.媒体查询: 通过不同的媒体类型和条件定义样式规则 :媒体查询大部分媒体特性都接受min和max 用于表示"大于等于"或"小于等于":width: min-width;max-width 媒体查询可以用在@media和import规则上,也可以用在HTML和XML中. @medi

css3 简单界面动画

asdasdasdasda asdasdasdasdacss3 简单界面动画,布布扣,bubuko.com

CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换). Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D

[原创]css3简单几步画一个乾坤图

效果如上,鼠标移上去会有动画. 代码如下非常简单: 1 <html> 2 <head> 3 <style> 4 .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:solid 1px #666;border-bottom:none; margin:0 auto;background:#fff;overflow:hidden;} 5 .inner{width:300px;heig

Css3帧动画深入探寻,讲点项目中实际会碰到的问题

先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属性animation 与 @keyframes配合实现的 具体可以参见这篇文章,这位女程序媛有着非常详尽与精彩的阐述 https://24ways.org/2012/flashless-animation/ 最后实现了一张猫跑动在有视频滚动的画面上 为什么不用gif? gif动画就是典型的帧动画,g

CSS3 自定义动画(animation)

除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transformation)和转换(transition)制作自定义动画,利用纯 CSS 制作出像 Flash 一样的效果.在实际使用中不难发现,变形和转换更适合做元素的交互,而自定义动画除了做交互外还能使到网页具有活力,有了自定义动画,利用 CSS 代替 Flash 才会更加现实. 首先看看 animation

css3 animation动画技巧

一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单……   为了解决这些折磨人的问题,我们今天来分析一下: 首先介绍css3 Animation动画库: http://daneden.github.io/animate.css/ 基本涵盖了我们常见的基础css3动

css3简单几步画一个乾坤图

原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: 1 <html> 2 <head> 3 <style> 4 .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:solid 1px #666;border-bottom:none; margin:0 auto;background:#fff;overflow:hidden;} 5 .