HTML5/CSS3翻转动画（一）

最新推荐文章于 2024-04-30 09:57:30 发布
最新推荐文章于 2024-04-30 09:57:30 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 探索实践 积少成多 文章标签： css html html5 javascript css3 ViewUI
翻转动画效果，就是将页面的元素（文字，图片）加入围绕坐标轴翻转的效果，在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;
}

目前我们得到如下效果：
[img]http://dl.iteye.com/upload/attachment/614283/fc5872ac-e828-3f5a-b11f-7c581471b49b.png[/img]
下面设置让文字翻转的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秒。最终我们就可以看到翻转的文字效果了：
[img]http://dl.iteye.com/upload/attachment/614285/649159e4-f433-3dba-8a6c-63cf5d518701.png[/img]
我们截取到一个翻转中的效果，大家可以使用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>

本文谨抛砖引玉的介绍，欢迎交流，希望对使用者有用。
[url=http://sarin.iteye.com/blog/1331326]下一篇[/url]我们继续来深入探讨HTML5/CSS3的简单动画。
nanlei1987
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）
weixin_29817791的博客
08-03 3875
Titlediv{width:120px;height:120px;line-height:120px;margin: 20px;background-color: #5cb85c;float: left;font-size: 12px;text-align: center;color:orangered;}/*效果一：360°旋转 修改rotate(旋转度数)*/.img1 {transitio...
【转载】CSS3 常用四个动画（旋转、放大、旋转放大、移动）
FungLeo's Blog
11-15 3万+
CSS3 常用四个动画（旋转、放大、旋转放大、移动）在页面设计中，给一些图标或者图片加上一些动画效果，会给人非常舒服的感觉。这里收集了四个常用动画效果，以便不时之需。转载原文效果一：360°旋转 修改rotate(旋转度数)* { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out;
CSS @keyframes 动画：颜色变化、背景旋转与放大缩小
最新发布
weixin_67244432的博客
04-30 1376
在CSS中，@keyframes是一个强大的工具，它允许我们创建复杂的动画效果。今天，我们将一起探索如何使用@keyframes来实现颜色变化、背景旋转以及放大缩小的动画效果。动画会在 2 秒内循环播放，并在不同的时间点改变盒子的背景颜色和变换（旋转和缩放）。
html5 翻转动画,HTML5/CSS3翻转动画（二）
weixin_42305163的博客
06-08 545
上一篇我们制作了两行文字的翻转效果，他们是同步进行的，当然不同步也可以设置时间不同。而有时我们想时间上是相同的，但是翻转效果是不同的，这点也不难做，我们再编写一组翻转动画CSS即可：@-webkit-keyframes flip2 {0% {-webkit-transform: rotateY(0deg) scale(1,1);color: white;}55% {-webkit-transfor...
常见的css3动画样式
weixin_30835923的博客
09-05 551
6、3D转换 属性: perspective : 设置假定人眼到投影平面的距离 只影响3D元素，不影响2D元素 设置位置：加在父元素上，设置好后，其子元素就可以完成3D的转换。 1、3d位移 改变元素在z轴上的位置 属性：transform: 函数：translateZ(z); transla...
html怎么把字做成动画效果,8个华丽的HTML5文字动画特效赏析
weixin_30174223的博客
05-30 3365
文字是网页的灵魂，很早以前有人发明了很多漂亮的计算机字体，这让网页变得样式各异。HTML5和CSS3的出现，我们可以让文字变得更加富有个性，在一些需要的场合，我们甚至可以利用HTML5制作文字动画。本文分享了8个非常华丽的HTML5文字动画特效，希望能给你作为参考。1、CSS3 3D折叠翻转文字动画今天我们再来分享一款CSS3文字特效应用，和之前分享的这款HTML5/CSS3文字特效类似，它也是一...
HTML5/CSS3翻转动画（二）
03-30
在“HTML5/CSS3翻转动画（二）”这一主题中，我们将深入探讨如何利用这两种技术创建出引人入胜的翻转动画效果。 首先，HTML5新增了许多元素，如`<article>`、`<section>`和`<figure>`等，这些元素为结构化文档提供...
2014 HTML5/CSS3热门动画特效TOP10
09-04
以下将详细介绍这些热门的HTML5/CSS3动画特效： 1. **模拟真人奔跑动画**：这款特效通过HTML5和CSS3的组合，利用多张图片的平滑切换，创造出逼真的奔跑动画。人物在跑步时的节奏感、投影以及距离变化导致的大小变化...
html5 css3仿谷歌卡片翻转动画特效
09-13
这个例子展示了如何使用HTML5和CSS3创建一个基本的谷歌卡片翻转动画。在实际项目中，你可能需要根据具体需求调整样式和动画效果，例如添加阴影、边框或者自定义动画时长。通过不断实践和优化，你可以创造出更加生动...
HTML5响应式3D翻转动画.zip
10-22
HTML5响应式3D翻转动画是现代网页设计中一种引人注目的视觉效果，它利用HTML5的新特性，如CSS3和JavaScript，为用户提供了一种动态、交互式的浏览体验。这种技术允许元素在用户交互时进行三维空间的翻转，从而创造出...
html5 css3文字翻转动画效果.zip
07-11
实现效果： html5 css3文字翻转动画效果，实现文字 翻转的效果，在企业网站中会用的多一点，可以用来做一些动态的标题。
css实现文字旋转360度
qq_26889291的博客
08-20 667
css实现文字旋转360度
你还不知道css的旋转效果怎么实现？来这里看看吧
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
html动画变大,CSS3 由小变大的过渡动画
weixin_39517520的博客
06-07 1413
一个DIV，由小变大，然后加透视怎么实现啊。单纯的使用scale好像不怎么明显啊。如果加上透视，效果更逼真啊。用动画啊，`<head><meta charset="UTF-8"><title>动画</title><style>.div{width: 100px;height: 100px;position: absolute;backgr...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
热门推荐
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
360°旋转 放大 上下左右移动
weixin_30835923的博客
11-03 775
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px; ...
CSS3动画产生圆圈由小变大向外扩散的效果
风动之石的专栏
12-31 3万+
涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。 无标题文档 @keyframes warn { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transfo
php 图片 3d旋转图片,html5实现图片的3D旋转效果
weixin_36019543的博客
03-23 496
我们先来看一下实现效果：(学习视频分享：html视频教程)H5旋转3D相册，鼠标放置暂停，图片灰度级为0，有放大效果。该实例运用H5和CSS3动画效果，未用javascript。提高了本人对CSS3 新属性的了解及掌握。完整代码如下所示：HTML5 3D旋转图片相册 可鼠标悬停*{padding: 0;margin: 0;border: none;outline: none;box-sizing:...
HTML中用CSS实现图片与内容前后翻转动画效果
娃娃的博客
09-06 9669
图片内容前后翻转动画效果，以百词斩官网首页为例仿写图片翻转效果（文章图片来源于官网百词斩首页）
HTML/CSS/JavaScript转换技术及应用场景
在Web开发中，转换属性是CSS3的一个重要特性，它允许开发者对元素进行2D或3D的变形操作。`transform`属性是最核心的，可以执行旋转、缩放、移动和平移等操作。例如，`transform: rotate(45deg)`会使元素顺时针旋转45...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值