请问做好一个css3动画后,如何实现让动画持续一定时间然后跳转到指定页面?

html-css020

请问做好一个css3动画后,如何实现让动画持续一定时间然后跳转到指定页面?,第1张

css3无法完成页面跳转,可以在css3做好后,用js

setTimeout(function(){

window.location.href="我是跳转路径"

},5000)

这样的话会在5s后自动调整到你指定的页面,时间可以自行调整

既然楼主的问题竟然一年没找到满意答案……

不才刚刚开始学css3,愿意跟楼主分享一下图片切换心得。 如果楼主现在已经找到了解决方案,那请楼主无视我的答案。

首先,lp52761十五级大神的答案貌似不是很确切,其实css3+html5非常强大,基本上可以脱离js,除非要做出能响应移动设备触屏事件的网站,或者我的观点也落伍了,html5+css3也可以做出触屏响应特效。

我看csdn右侧图片切换有点类似opacity的变化,那么楼主不妨用keyframes方法在opacity上做文章;例如:

先定义一个keyframe

@keyframes qiehuan {

30%{opacity:1}

60%{opacity:0}

}

之后为图片容器做一个类:

.container{

/*这里长宽高边框边距之类的东西你自己随便写。*/

}

然后为你的图片们定义专属类:

.tupianmen{

position:absolute

//此处调用keyframe方法

animation:qiehuan 20s infinite

opacity:0

}

然后用css3独有的nth-child选择器来选择你要切换的图片

img:nth-child(4){animation-delay:0s}

img:nth-child(3){animation-delay:5s}

img:nth-child(2){animation-delay:10s}

img:nth-child(1){animation-delay:15s}

接下来你就可以写html了:

<!DOCTYPE html>

<html>

...... 略掉杂七杂八的东西......

<div class="container">

<img class="tupianmen" src="你的图片1" />

<img class="tupianmen" src="你的图片2" />

<img class="tupianmen" src="你的图片3" />

<img class="tupianmen" src="你的图片4" />

</div>

</html>

写完之后保存,查看效果如何

对了,差点忘了,如果用不同浏览器的话,可能需要简单更改一下keyframe或者animation的前缀,比如加一个-webkit-才行。

望采纳。。。