css3 由小变大然后一直旋转的动画怎么做

2023-02-20 22:51:02html-css014

css3 由小变大然后一直旋转的动画怎么做,第1张

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：

<!DOCTYPE html>

<html>

<head>

img{width: 200px}

.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}

.animate1{

-webkit-animation: move1 2s infinite

}

.animate2{

-webkit-animation: move2 1s infinite

}

@-webkit-keyframes move1{

0%{

-webkit-transform:scale(1)

}

100%{

-webkit-transform:scale(1.5)

}

@-webkit-keyframes move2{

0%{

-webkit-transform: rotateZ(0deg) scale(1.5)

-webkit-transform:

}

100%{

-webkit-transform: rotateZ(360deg) scale(1.5)

}

</style>

</head>

<body>

window.onload=function(){

var oDiv=document.querySelector(".div1")

oDiv.className="div1 animate1"

setTimeout(function(){

oDiv.className="div1 animate2"

},2000)

}

</script>

</body>

</html>

原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。

当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。

http://www.zhangxinxu.com/wordpress/2010/04/让ie6ie7ie8浏览器支持css3属性/

一、下载

您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。

二、上面的是什么东西

首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Stop! 别叉远了，点到为止，如果您对htc文件感兴趣，可以参见这里。

本文的这个ie-css3.htc文件看看名字，看看长相就知道是干嘛的了，让IE浏览器支持CSS3的一些属性。没错，就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为（比较流行的几种）。此htc第一段主要脚本如下：

function supportsVml() {

if (typeof supportsVml.supported == "undefined") {

var a = document.body.appendChild(document.createElement('div'))

a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'

var b = a.firstChild

b.style.behavior = "url(#default#VML)"

supportsVml.supported = b ? typeof b.adj == "object": true

a.parentNode.removeChild(a)

}

return supportsVml.supported

}

明白人基本上都知道，这不跟js脚本一个模子里出来的嘛。也就是说，htc只是js脚本去韩国整了个容，换了副马甲而已。

三、如何工作的

要说工作原理，得有一个新角色粉墨登场，那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识，您可以点击这里：VML百科

如果要我说的话，我觉得就是IE浏览器的御用画笔，专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了，正好可以就此实现一些IE不支持的CSS3效果。

IE VML画笔张鑫旭-鑫空间-鑫生活

四、如何使用

使用是很容易的，看下面的示例代码：

.box {

-moz-border-radius: 15px/* Firefox */

-webkit-border-radius: 15px/* Safari 和 Chrome */

border-radius: 15px/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

-moz-box-shadow: 10px 10px 20px #000/* Firefox */

-webkit-box-shadow: 10px 10px 20px #000/* Safari 和 Chrome */

box-shadow: 10px 10px 20px #000/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

behavior: url(ie-css3.htc)/* 通知IE浏览器调用脚本作用于'box'类 */