CSS：纯CSS滚动动画

Z时代
2024-01-10
分类：问答

我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。

但这对于我的需求而言有点太先进了，因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行那些CSS滚动，有锚标签？

HTML看起来像这样： <a href="#" class="button">Learn more</a>

我已经有一些CSS，需要在单击按钮时触发：

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}