[分享]css几秒后自动跳转代码

在编写网页时，有时候需要在页面自动执行某些操作，比如在几秒钟之后自动跳转到另一个页面。这时候就可以使用CSS代码来实现。为了实现这个功能，我们需要使用CSS3中的animation属性。具体步骤如下：...

在编写网页时，有时候需要在页面自动执行某些操作，比如在几秒钟之后自动跳转到另一个页面。这时候就可以使用CSS代码来实现。

为了实现这个功能，我们需要使用CSS3中的animation属性。具体步骤如下：

1. 在CSS文件中先定义动画的名称和需要执行的样式：

@keyframes jumpPage {
  from {
    /* 开始位置 */
    transform: translate(0,0);
  }
  to {
    /* 结束位置 */
    transform: translate(0, 100%);
  }
} 

2. 接着在需要自动跳转的元素上添加CSS代码：

.element {
  animation: jumpPage 3s forwards;
} 

其中，animation属性包括四个值：

1. animation-name：指定要执行的动画名称，即之前定义的keyframes名字。

2. animation-duration：指定动画完成的时间。这里我们设置为3秒钟。

3. animation-fill-mode：指定动画结束后应该保持哪种样式。这里我们设置为forward，表示动画结束时元素应该保持最后一帧的样式。

4. animation-timing-function：动画速度的变化函数。默认是"ease"，我们可以自定义。

3. 最后就是等待页面加载完毕，自动触发跳转的JavaScript代码：

<script>
window.onload = function() {
  setTimeout(function(){
    window.location.href = "http://www.example.com";
  }, 3000);
}
</script> 

这段代码中，用setTimeout函数来设置3秒钟的延迟，然后再执行跳转。

这样，就能够实现在页面加载后，在3秒钟之后自动跳转到指定页面的功能了。