HTML5/CSS3翻转动画（一）

sarin

浏览: 1756915 次
性别:
来自: 大连

最近访客更多访客>>

jiangjian1107

wanlinjin

malson

eternalee

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Spring数据库访问系列...
浏览量：173657

: Android学习笔记
浏览量：368124

: iBatis开发详解
浏览量：189261

: Objective-C学习...
浏览量：99838

文章分类

社区版块

存档分类

博客分类：

积少成多
探索实践

css html html5 javascript css3

翻转动画效果，就是将页面的元素（文字，图片）加入围绕坐标轴翻转的效果，在Webkit内核的浏览器中，很容易实现。而其它内核暂时支持不是很好。首先，我们创建页面：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery.js"></script>
	<title>Flip Text</title>
</head>
<body>
<div id="cover">
	<div id="coverText">
		<div id="welcomeStr1">Welcome To HTML5!</div>
		<div id="welcomeStr2">Hello World!</div>
	</div>
</div>
</body>

代码很简单，其中仅包含两个文本信息用于测试。引入jQuery是为了后面的事件绑定，我们使用CSS3的动画支持来展示，那么下面来逐一看看CSS代码：

*{
    margin:0px;
    padding:0px;
}
#cover{
    position:absolute;
    width:100%;
    height:100%;
    min-width: 768px;
    overflow: hidden;
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0, #00BDF2), color-stop(1, #003D7B));
    background: -moz-linear-gradient(top,#00BDF2, #003D7B);
}

这段很简单，就是设置页面背景色的。这里可以在FF中看到效果。下面是对文本的CSS支持：

#coverText {
    position: absolute;
    left: 18%;
    top: 30%;
	width:64%;
	text-align:center;
}
#welcomeStr1,#welcomeStr2 {
	height: 86px;
	font-size: 64px;
	line-height: 86px;
	letter-spacing: 2px;
	color: white;
	font-family:"Courier New";
	-webkit-animation-time-function: linear;
}

目前我们得到如下效果：

下面设置让文字翻转的CSS3动画：

@-webkit-keyframes flip {
	0% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
	70% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
	100% {
		-webkit-transform: rotateY(90deg) scale(0.6,0.7);
		color: #3C4043;
	}
}

该段代码的含义是，围绕y轴翻转文字，并在最后文字大小发生变化，并变色。当然如果想沿着x轴旋转，那么使用rotateX就可以了，这很简单。现在在CSS中补加如下代码：

	-webkit-animation: flip 5s infinite;
	-webkit-text-size-adjust: none;

我们可以看到的效果是文字围绕y轴主键变小，并变色，最终合并到y轴，但突然还原。这个效果是没错的，因为我们只有前半部分的动画效果，而后半部分翻转回来的没有设置，也就是我们看到的主键消失但突然出现的效果了。下面继续设置CSS动画，因为翻转过去了还得翻转回来吧：

@-webkit-keyframes unflip {
	0% {
		-webkit-transform: rotateY(90deg) scale(0.6,0.7);
		color: #3C4043;
	}
	100% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
}

    那么翻转回来我们定义名称为unfilp，此时不设置70%的停顿延时，直接翻转回来即可。我们看到，0%时是和上面flip中100%接上的，scale和color都是一致的。而100%是和flip中0%对应的，那么就可以达到还原的效果了。
    此时可以修改-webkit-animation来测试这一步的效果。
    好，现在问题来了，我们设置了两个CSS动画，那么怎么应用可以按顺序来执行呢，写到-webkit-animation中使用多个动画效果，好像不支持，或许是我写的不对。那么只好借助js来简单实现了。也就是事件绑定。Webkit中有个事件是webkitAnimationEnd，我们可以将两个动画绑定到这个事件上，就可以达到自动按顺序执行。我们编写一个js函数来达到这个效果：

flip = function(element, flipName, flipTime, unflipName, unflipTime) {
	if(!element){
		return;
	}
	element.style.webkitAnimation = "" + flipName + " " + flipTime;
	return $(element).bind('webkitAnimationEnd', function() {
		switch (element.style.webkitAnimationName) {
			case flipName:
				return element.style.webkitAnimation = "" + unflipName + " " + unflipTime;break;
			case unflipName:
				return element.style.webkitAnimation = "" + flipName + " " + flipTime;break;
		}
	});
};

flip函数定义功能如下：首先判断一下element，当然可以不做，只要在调用的时候保证即可。然后给webkitAnimation赋值，就是我们定义的CSS动画名称和执行的时间。下面就是核心功能所在了。巧妙使用事件绑定和switch的返回机制。将webkitAnimationEnd按照filp动画的名称进行绑定。这里格外注意，element.style.webkitAnimation = "" + flipName + " " + flipTime;一句绑定了正向翻转的CSS动画和时间，那么为了有反向的效果，下面的Switch段是相反的，也就是case filpName时进行unflip动画。
写好了js函数，那么我们来调用：

$(function() {
    flip($("#welcomeStr1")[0], 'flip', '1.5s', 'unflip', '0.7s');
    flip($("#welcomeStr2")[0], 'flip', '1.5s', 'unflip', '0.7s');
});

我们把两个文本段绑定flip执行1.5秒，unflip执行0.7秒。最终我们就可以看到翻转的文字效果了：

    我们截取到一个翻转中的效果，大家可以使用webkit内核的浏览器来进行测试，就可以看到连续的翻转效果了。
    此时两个文本段的动画效果是同步的，因为我们设置的时间都是一样的，如果想不同步，修改时间就可以了，这样就能根据自己的需求来确定了。
    最后附上本文整体代码，jQuery的库那就自行去添加吧：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery.js"></script>
	<title>Flip Text</title>
<style>
*{
    margin:0px;
    padding:0px;
}
#cover{
    position:absolute;
    width:100%;
    height:100%;
    min-width: 768px;
    overflow: hidden;
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0, #00BDF2),color-stop(1, #003D7B));
    background: -moz-linear-gradient(top,#00BDF2, #003D7B);
}
#coverText {
    position: absolute;
    left: 18%;
    top: 30%;
	width:64%;
	text-align:center;
}
#welcomeStr1,#welcomeStr2 {
	height: 86px;
	font-size: 64px;
	line-height: 86px;
	letter-spacing: 2px;
	color: white;
	font-family:"Courier New";
	-webkit-animation-time-function: linear;
}

@-webkit-keyframes flip {
	0% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
	70% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
	100% {
		-webkit-transform: rotateY(90deg) scale(0.6,0.7);
		color: #3C4043;
	}
}
@-webkit-keyframes unflip {
	0% {
		-webkit-transform: rotateY(90deg) scale(0.6,0.7);
		color: #3C4043;
	}
	100% {
		-webkit-transform: rotateY(0deg) scale(1,1);
		color: white;
	}
}
</style>
<script type="text/javascript">
flip = function(element, flipName, flipTime, unflipName, unflipTime) {
	if(!element){
		return;
	}
	element.style.webkitAnimation = "" + flipName + " " + flipTime;
	return $(element).bind('webkitAnimationEnd', function() {
		switch (element.style.webkitAnimationName) {
			case flipName:
				return element.style.webkitAnimation = "" + unflipName + " " + unflipTime;break;
			case unflipName:
				return element.style.webkitAnimation = "" + flipName + " " + flipTime;break;
		}
	});
};

$(function() {
    flip($("#welcomeStr1")[0], 'flip', '1.5s', 'unflip', '0.7s');
    flip($("#welcomeStr2")[0], 'flip', '1.5s', 'unflip', '0.7s');
});
</script>
</head>
<body>
<div id="cover">
	<div id="coverText">
		<div id="welcomeStr1">Welcome To HTML5!</div>
		<div id="welcomeStr2">Hello World!</div>
	</div>
</div>
</body>

本文谨抛砖引玉的介绍，欢迎交流，希望对使用者有用。
下一篇我们继续来深入探讨HTML5/CSS3的简单动画。

查看图片附件

4
顶

0
踩

分享到：

HTML5/CSS3翻转动画（二） | HTML5/CSS3清爽后台番外篇-添加锁屏效果

2011-12-30 13:43
浏览 17674
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论