我正在尝试使用Micalsnik的aos(scoll上的动画(库。我正在尝试创建一个自定义动画，每次向下滚动时都会出现一个直线增长的动画。我的意思是，当一条水平线在屏幕上向下滚动时，它的宽度从0增长到100%。我将页面的css文件配置为：
#linebottom {
margin-top: 0px;
margin-bottom: 5px;
border-top: 1px solid #FFFFFF;
position:relative;
}
@keyframes grow {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
我打开了aos.css文件。并添加了以下行：
[data-aos=xyz]{
animation: grow 4s forwards;
}
[data-aos=xyz].aos-animate{
animation: none;
}
但动画仅在页面刷新时播放。上下滚动时不会重新启动。它的宽度达到100%并保持不变。有什么帮助吗？
不要试图使用纯css来实现这一点，它会变得非常复杂。使用这种方法：
<!DOCTYPE html>
<html>
<head>
<style>
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
padding:10px;
background-color: #f1f1f1;
}
.progress-container {
width: 100%;
height: 8px;
background: grey;
}
.progress-bar {
height: 8px;
background: green;
width: 0%;
}
</style>
</head>
<body>
<div class="header">
Scroll Indicator - Scroll Down to See The Effect
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class="content">
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
</div>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
</body>
</html>使用一点javascript，它变得容易多了。我希望你能理解javascript代码。
现在我终于知道你想做什么了，下面是我尝试使用纯CSS的另一种方法：
.example-post {
position: relative;
padding: 0;
color: #7f8b90;
border-top: 1px dotted #aaa;
border-bottom: 1px dotted #aaa;
}
.example-post p {
font-size: 18px;
line-height: 1.5;
}
.example-post a {
color: #607D8B;
}
.example-post:before {
content: "";
display: block;
background: linear-gradient(to right top, #CDDC39 0%, #03A9F4 50%, #e6f0f5 50%);
height: calc(100% - 100vh + 6px);
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.example-post:after {
content: "";
display: block;
background: #e6f0f5;
height: calc(100vh - 6px);
width: 100%;
position: -webkit-sticky;
position: sticky;
bottom: 0;
left: 0;
}
code {
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px 5px;
font-size: 14px;
}
.entry-content {
max-width: 790px;
margin: 0 auto;
position: relative;
z-index: 1;
margin-bottom: calc(-100vh + 6px);
padding: 0 15px;
}
/* demo stuff */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #e6f0f5;
padding-top: 40px;
padding-bottom: 50px;
margin: 0;
}
html, button, input, select, textarea {
font-family: 'Nunito', sans-serif;
color: #92a4ad;
}
h1 {
text-align: center;
margin: 30px 15px;
font-size: 40px;
}
.zoom-area {
max-width: 650px;
margin: 50px auto 70px;
font-size: 24px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.link-container {
text-align: center;
}
a.more-link {
font-size: 18px;
font-weight: 700;
background-color: transparent;
padding: 10px 5px 0;
border-radius: 0;
color: #416475;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
line-height: 1.5;
text-decoration: none;
margin-top: 50px;
letter-spacing: 1px;
border-bottom: 6px solid #92a4ad;
}<h1>Reading Progress Bar CSS Only</h1>
<section class="example-post">
<div class="entry-content">
<h2>Example Post</h2>
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
<p>blablablablablablablablablablablablablablablablablablablablablablablabla
</div>