CSS：纯CSS滚动动画 [英] 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>

HTML looks like this: <a href="#" class="button">Learn more</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;
    }
}

---

提前感谢！

---

Thanks in advance!

推荐答案

您可以使用css3 ：anchor < $ c>伪选择器，当与当前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

了解了这一点，我们可以将此技术与使用的接近选择器如+和〜通过目标元素选择任何其他元素，其id与当前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：纯CSS滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！