上一篇我们制作了两行文字的翻转效果,他们是同步进行的,当然不同步也可以设置时间不同。而有时我们想时间上是相同的,但是翻转效果是不同的,这点也不难做,我们再编写一组翻转动画CSS即可:
@-webkit-keyframes flip2 {
0% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
55% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
100% {
-webkit-transform: rotateY(90deg) scale(0.6,0.7);
color: #3C4043;
}
}
@-webkit-keyframes unflip2 {
0% {
-webkit-transform: rotateY(90deg) scale(0.6,0.7);
color: #3C4043;
}
100% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
}
有了第二组动画,那么我们将前面的也补上1作为第一组,我们得到了两组动画了。也就是整体时间上同步,具体内部不同。之前写好的js不用修改,直接使用即可:
$(function() {
flip($("#welcomeStr1")[0], 'flip1', '1.5s', 'unflip1', '0.7s');
flip($("#welcomeStr2")[0], 'flip2', '1.5s', 'unflip2', '0.7s');
});
这样就达到效果了。具体请自行在浏览器中观看,截屏是看不出来的。下面来看看图片的旋转,这当然是可以的,把文本换成图片就可以了,我们用一个图片做测试,来进行圆周翻转,先修改HTML代码:
<body>
<div id="cover">
<div id="coverText">
<div id="welcomeStr1"><img src="images/tool.png"></div>
</div>
</div>
</body>
元素id都不变,就把其中内容换成了一个图片,然后修改一下动画CSS:
@-webkit-keyframes flip1 {
0% {
-webkit-transform: rotateY(0deg) scale(1,1);
}
100% {
-webkit-transform: rotateY(180deg) scale(1,1);
}
}
@-webkit-keyframes unflip1 {
0% {
-webkit-transform: rotateY(180deg) scale(1,1);
}
100% {
-webkit-transform: rotateY(360deg) scale(1,1);
}
}
从rotateY中的数值来看就是进行一个圆周的翻转,对于对称图片,那么可以只用180度就够了,scale不变化,就是图片不进行大小的缩放,当然你可以去设置。然后我们就可以看到效果了:
那么目前为止,这部分内容的基本原理就介绍完了,下面我们进行集成,把这个效果用于我们的后台页面,之前我们加入了锁屏效果,那么现在就加个锁屏之后的计时效果,计时的文字顺便翻转显示,我们继续来改造代码:
<div id="overlay">
</div>
<div id="flip">
<div id="flipText"></div>
</div>
<div id="slide">
<span id="slider"></span>
<span id="text">滑动解除锁定</span>
</div>
我们在模态背景和滑块中间加一组flipText元素,设置CSS:
#flip{
position:absolute;
left:18%;
top:35%;
width:64%;
height: 100px;
z-index:101;
-webkit-animation-time-function: linear;
}
#flipText{
font-family:"Courier New";
font-size:36px;
font-weight:bold;
color:white;
text-align:center;
vertical-align: middle;
line-height:100px;
}
这和上面的单纯文字显示没有差别,下面设置计时器:
var sec=0;
var seconds = setInterval(function() {
sec++;
$("#flipText").html("You have been away for "+sec+" seconds!");
}, 1000);
每1秒执行一次定时器,将filpText中的文字改成离开的秒数,这里为了演示方便,不对秒数增大进行分钟的处理,那么我们可以得到如下效果:
下面应用动画效果,加一句代码就行了:
flip($("#flipText")[0], 'flip1', '2s', 'unflip1', '.7s');
现在我们就可以看到文字旋转的效果了:
最后不要忘了在滑块解锁后,清除计时器,否则时间还会继续累加的:
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > slideWidth*0.7) {
$("#slide").fadeOut();
$("#overlay").fadeOut();
$("#flip").fadeOut();
window.clearInterval(seconds);
} else {
}
},
stop: function(event, ui) {
if (ui.position.left < slideWidth*0.7) {
$(this).animate({left: 0});
}
}
});
也就是window.clearInterval(seconds);这句,那么这个实例中我们又加入了CSS翻转动画来计算离开的时间,实例也就越来越丰富了。
那么CSS动画部分就介绍完了,附件中有涉及到的图片和我们一直更新的实例源码,希望对使用者有用。
- 大小: 27.5 KB
- 大小: 65 KB
- 大小: 57.5 KB
- 大小: 103.8 KB
分享到:
相关推荐
HTML5 3D立方体按钮动画翻转特效</title> <link rel="stylesheet" type="text/css" href="css/zzsc.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> &...
今天要分享的是一款CSS3鼠标滑过翻转动画图标,当我们将鼠标滑过图标时,图标中的小图案就会发生翻转。另外它还有一个特点是随着页面大小的变化,图标的尺寸也会自动适应屏幕的大小,这款CSS3小图标也比较适合用作...
最近我们已经为大家分享过很多基于HTML5和CSS3的立方体动画,比如HTML5多立方体3D翻转动画和HTML5 3D立方体图片切换动画,效果都非常惊人。今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标...
HTML5焦点图可以实现很多炫酷的效果,就像这...今天我们再来分享一款另外一种效果的HTML5焦点图插件,该焦点图利用CSS3的属性实现了图片旋转的动画效果,既可以顺时针旋转,也可以逆时针旋转,并且图片旋转也比较流畅。
html5 css3文字翻转动画效果是一款基于html5 css3实现的3D立体文字翻转动画效果代码。
之前向大家分享过一款HTML5 Canvas字母文字颗粒动画,效果非常不错,由此可见,利用HTML5和CSS3可以方便的实现很多以前很难实现的文字特效。今天我要向大家介绍一款HTML5/CSS3文字投影特效,它的使用也很简单,HTML5...
今天我们再来分享一款CSS3文字特效应用,和之前分享的这款HTML5/CSS3文字特效类似,它也是一款CSS3 3D折叠翻转文字动画,只要将鼠标滑过文字,文字的另一面即可像翻页一样翻转开来,呈现3D立体的视觉效果,这一切都...
html5+css3文字翻转动画效果.zip
html5 css3仿谷歌卡片翻转动画特效
css3 + html5 + javascript 实现的翻转 和滑动动画; 将jqurey mobile的动画进行了简化,方便使用。 测试使用的是ff 11,safari 5.1.5;ie的,css存在问题,如有了解的朋友,请告之我,谢谢。
这是一款效果炫酷的html5和css3图片3d翻转多米诺动画特效插件。该插件是为移动设备定制的。该图片3d翻转插件当鼠标滑过图片时,图片变为3d立方体像多米诺骨牌一样跌倒,3d立体效果非常强烈。
今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效,当我们将鼠标滑过一个个卡片时,卡片可以进行翻转,这个应该很容易,而且也很常见,你一定会说,这种翻转动画随便用CSS3特性就可以实现了。...
一款超级绚丽的html5、css3页面3d翻转展现导航菜单特效。点击导航按钮后,整个页面出现3d翻转动画,之后导航菜单出现。共6种效果。
片段代码: <style> html, body, div, span, applet, object, iframe, ... 这是一款漂亮的项目价格表360度翻转代码,HTML5 CSS3价格表翻转切换动画特效,也可以改成选项卡切换、登录注册界面切换效果。
HTML5 CSS3实现的三维几何体翻转动画 HTML5 CSS3代码特效,按指定的顺序依次翻转,最终生成的动画效果很好玩呢,像是有人指挥呢。
CSS3皇帝翻牌子翻转动画特效是一款鼠标悬停到图片上翻转特效下载。
Animate.css拥有多款文字特效的css3动画库效果源码,是一段拥有数十款文字特效的css3动画库代码,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出...
JS+CSS3点击按钮3D翻转动画.zip