Question

我正在建立一个带有不同div的网站，这些div可以在屏幕视图中上下滑动，以进入主div顶部；顶部和左侧的人都在正常工作，在单击时滑动并在单击时返回屏幕视图。

但是底部和右侧的浏览器却在跳跃或滞后，具体取决于浏览器。谁能帮助我，找出我做错了什么？

（由于我不了解Java或PHP，因此我正在寻找仅css的解决方案，我在编码方面相当新）

html{
background-color: #CEF1E8;}


body{margin: 0;
 padding: 0;
background-color: #CEF1E8;
overflow: hidden;}


.nav-top {
display: block;
position: fixed;
width: 100vw;
text-align: center;
z-index: 2; }

.nav-down {
position: fixed;
bottom: 0;
width: 100vw;
text-align: center;
z-index: 2; }

.nav-left{display: auto;
position: absolute;
z-index:2;
top:0;
left:0;
height: 100%;
text-align: center;
writing-mode: vertical-rl;
transform: translate(1.6vw);
margin: 0 auto;
z-index: 2; }

.nav-right{position: absolute;
display: inline-block;
top:0;
right: 0;
height: 100%;
text-align: center;
writing-mode: vertical-rl;
transform: rotate(180deg) translate(1.6vw);
transform-origin: center;
z-index: 2; }


.menu-top {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-top { font-size: 2.5vw;}}

.menu-contact {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-contact { font-size: 2.5vw;}}

.menu-about {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-about { font-size: 2.5vw;}}

.menu-work {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #FE632D;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-work { font-size: 2.5vw;}}


.menu-home {text-decoration: none;
font-family: "Bodoni-36-Bold";
color: #CEF1E8;
font-size: 3vw;
cursor: pointer;
margin: 0.5vw;}

@media screen and (min-width: 1025px) {.menu-home { font-size: 2.5vw;}}

.panel#home {
  z-index: 1;
  background: #CEF1E8;
    canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block; 
    }
}

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  z-index: 500;
  box-sizing: border-box; 
}

.panel#slice {
  background-color: pink;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%); 
}

.panel#slice:target {
  transform: translateY(0);
  -webkit-transform: translateY(0); 
}

.panel#slice2 {
  background-color: #FFF7C8;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform-origin: 100% 100% 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.panel#slice2:target {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

.panel#slice3 {
  background-color: #FE632D;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.panel#slice3:target {
  transform: translateX(0);
  -webkit-transform: translateX(0); 
}

.panel#slice4 {
  background-color: #005248;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  transform: translateY(100%);
  -webkit-transform: translateY(100%); 
}

.panel#slice4:target {
  transform: translateY(0);
  -webkit-transform: translateY(0);  
}

/* and aditionaly some delays animation, don't know if it's relevant */

.panel-content {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-top: -5%; 
}

.panel:target .panel-content {
  margin-top: 0; 
}

.panel-content2 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-right: -5%; 
}

.panel:target .panel-content2 {
  margin-right: 0; 
}

.panel-content3 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-left: -5%; 
}

.panel:target .panel-content3 {
  margin-left: 0; 
}

.panel-content4 {
  will-change: margin-top;
  transition: all 700ms; 
  transition-delay: 600ms;
  margin-bottom: -5%; 
}

.panel:target .panel-content4 {
  margin-bottom: 0; 
}

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="menuphone.css">
    <meta charset="UTF-8">
    <meta name="description" content="Alizée Laurent, graphic designer and illustrator, welcome to my website!">
    <meta name="author" content="Alizée Laurent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
<header>
        
</header>
    
<main>
    
<div class="nav-top"> <a class="menu-top" href="#slice" data-hover="Slice">top</a> </div>
<div class="nav-left"><a class="menu-contact" href="#slice3" data-hover="Slice3">Contact</a></div>
<div class="nav-right"><a class="menu-about" href="#slice2" data-hover="Slice2">About me</a></div>  
<div class="panel" id="home">
    <h1 class="name-home">Alizée Laurent</h1>
</div>
<div class="nav-down"><a class="menu-work" href="#slice4" data-hover="Slice4">Work</a></div>



<div class="panel" id="slice">
    <div class="panel-content">
            <h3>holli</h3>
    </div>
    <div class="nav-right"><a class="menu-home" href="#home" >Homepage</a></div>
</div>
    
<div class="panel" id="slice2">
    <div class="panel-content2">
            <h3>More about me</h3>
    </div>
    <div class="nav-left"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

    
<div class="panel" id="slice3">
    <div class="panel-content3">    
        <h3>contact</h3>
    </div>
    <div class="nav-right"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

    
<div class="panel" id="slice4">
    <div class="panel-content4">
        <h3>work</h3>
    </div>  
    <div class="nav-top"><a class="menu-home" href="#home" >Homepage</a></div>
</div>

   
</main>
</body>
</html>

翻译CSS动画无法正常工作（跳转/滞后）

0 个答案: