Question

我希望能够用CSS或少量的javascript（如果需要）动画化一个简单的介绍页面/背景到下一页，并包含一个简单的PHP。单击链接时，它将加载所有内容：标题（菜单）/内容/页脚，可以称为“起始页”。

我知道如何仅在加载的内容上放置一些关键帧动画，但是我不希望菜单（标题）第一次仅对内容部分进行动画处理。也许最好的办法是不要转到起始页，而是已经将其加载到简介部分的下面，并将简介动画化为起始页。考虑到这一点，我阅读了有关立方贝塞尔曲线的信息。

CSS：

a {
 color: inherit;
 text-decoration: none;
 -webkit-transition: color 0.3s;
 transition: color 0.3s;
}

.intro {
  position: fixed;
  display: block;
  top: 48%;
  left: 50%;
  text-align: center;
  font-size: 18vw;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2; 
 }

.bg {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  z-index: 1;
 }

a:hover + .bg {
 background: white;
 -webkit-transition: background 0.3s;
 transition: background 0.3s;
}

.intro:hover  {
 color: black;
}

PHP：

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php') ?>

<a href="/start" class="intro">INTRO TEXT OR LOGO</a>
<div class="bg"></div>

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php') ?>

动画介绍页面/背景到下一页

0 个答案: