纯 CSS 滚动动画 [英] Pure CSS scroll animation

问题描述

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

I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only.

所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

So I've found this tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

演示:http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

但它对于我的需求来说有点太高级了，因为我只是希望浏览器在单击页面顶部的一个按钮时向下滚动，所以我想知道:是否可以在没有输入的情况下执行这些 CSS 滚动按钮，只有一个锚标签?

But it's a bit too advanced for my needs since I just want the browser to scroll down on a click on one button located on top of the page, so I was wondering: is it possible to do those CSS scrolls without the input buttons, just with an anchor tag?

HTML 如下所示:<a href="#" class="button">了解详情</a>

我已经有了一些需要在按钮点击时触发的 CSS:

I have already some CSS which I need to trigger on button click:

/* 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;
    }
}

推荐答案

您可以使用 css3 :target 伪选择器通过锚标记来完成，当元素带有与当前 URL 的哈希相同的 id 获得匹配.示例

You can do it with anchor tags using css3 :target pseudo-selector, this selector is going to be triggered when the element with the same id as the hash of the current URL get an match. Example

知道了这一点，我们可以将此技术与邻近选择器(如+"和~"的使用)相结合，通过目标元素选择与当前 url 的哈希匹配的任何其他元素.例如，你在问.

Knowing this, we can combine this technique with the use of proximity selectors like "+" and "~" to select any other element through the target element who id get match with the hash of the current url. An example of this would be something like what you are asking.

这篇关于纯 CSS 滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！