似乎无法让我的滚动动画停止，解决问题。

所以我一直在搞乱这个现在对于最近两天寻找答案的任何地方。似乎无法让我的滚动动画停止，解决问题。 | CSS和HTML

我试图与标题和图片滚动动画。

我希望动画停止页面（比搜索栏下）的顶部标题应该差不多到顶部和图片应与冠军差距很小停止。

我也想知道我怎么可以设置网页的分辨率所以不会在页面底部的滚动条。

/* Background Image */ 
 
body 
 
    { 
 
     background-image: url('bg.jpg'); 
 
     background-repeat: repeat; 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
    } 
 

 

 
/* Page Layout */ 
 

 
/* Animation stuffy */ 
 

 
     #titles 
 
      { 
 
      position: absolute; 
 
      color: white; 
 
      width: 200vh; 
 
      height: 50em; 
 
      bottom: 0; 
 
      left: 50%; 
 
      margin-left: -9em; 
 
      font-size: 400%; 
 
      line-height: 50px; 
 
      font-weight: bold; 
 
      font-style: italic; 
 
      text-align: center; 
 
      overflow: hidden; 
 
      transform-origin: 50% 100%; 
 
      } 
 

 
     #titlecontent 
 
      { 
 
      position: absolute; 
 
      top: 25%; 
 
      animation: scroll 80s linear 0s; 
 

 
      } 
 

 
      @keyframes scroll 
 
      { 
 
      0% { top: 100%; } 
 
      100% { top: -160%; } 
 
      } 
 

 
img 
 
    { 
 
    src: width: 150px; height: 250px; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Webpage</title> 
 
    <link href="style.css" type="text/css" rel="stylesheet" /> 
 
    </head> 
 
    <body> 
 

 
    <div id="titles"><div id="titlecontent"> 
 

 
     <h1> The</h1> 
 
     <h1>Title</h1> 
 

 
     <p> 
 
     <img src="Images/Keito.jpg" alt="1"> 
 
     \t <img src="Images/Keio.JPG" alt="2"> 
 
     <img src="Images/Koit.jpg" alt="4"> 
 
     <img src="Images/Rene.jpg" alt="5"> 
 
     <img src="Images/Priit.jpg" alt="8"> 
 
     </p> 
 

 
    </div> </div> 
 

 
    </body> 
 
</html>

来源

2016-11-18 Rene F.

可以使用具有定义高度和溢出容器：隐躲滚动块时，它的低。像这样：

html, 
 
body { 
 
    height: 98%; 
 
} 
 

 
.container { 
 
display:bock; 
 
    width: 100%; 
 
    height: 99%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.scroll-block { 
 
    display:block; 
 
    margin: 15px; 
 
    position: absolute; 
 
} 
 

 
h1 { 
 
    margin: 15px auto; 
 
} 
 

 
.illus-elem { 
 
    display: block; 
 
    width: 250px; 
 
    height: 100px; 
 
    margin: 5px 0; 
 
} 
 

 
.illus-elem_bkg-blue { 
 
    background: blue; 
 
} 
 

 
.illus-elem_bkg-yellow { 
 
    background: yellow; 
 
} 
 

 
.illus-elem_bkg-red { 
 
    background: red; 
 
} 
 

 
.illus-elem_bkg-green { 
 
    background: green; 
 
} 
 

 
/*-- ANIMATION: FUNCTION --*/ 
 

 
@keyframes scrolltotop { 
 
    from {top: 1000px;} 
 
    to {top: 10px;} 
 
} 
 

 
/*-- ANIMATION: APPLY --*/ 
 
.scroll-block { 
 
    animation-name: scrolltotop; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: 1; 
 
}

<div class="container"> 
 
<div class="scroll-block"> 
 
    <h1>The title</h1> 
 
    <div class="illus-elem illus-elem_bkg-blue"></div> 
 
    <div class="illus-elem illus-elem_bkg-yellow"></div> 
 
    <div class="illus-elem illus-elem_bkg-red"></div> 
 
    <div class="illus-elem illus-elem_bkg-green"></div> 
 
    </div> 
 
</div>

来源

2016-11-18 16:15:40 Dexter0015

这完美地工作！ –

似乎无法让我的滚动动画停止，解决问题。 | CSS和HTML

回答

相关问题