css3 – CSS:纯CSS滚动动画

前端之家收集整理的这篇文章主要介绍了css3 – CSS:纯CSS滚动动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在寻找一种方法,当点击位于页面顶部的按钮只使用CSS3向下滚动。

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

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

但是它对我的需求有点太先进,因为我只是想要浏览器向下滚动,点击位于页面顶部的一个按钮,所以我想知道:是否可以做这些CSS滚动没有输入按钮,只是带锚标签

HTML看起来像这样:< a href =“#”class =“button”>了解详情< / 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;
    }
}

提前致谢!

解决方法

你可以使用css3:target伪选择器使用锚点标签,当与当前URL的哈希具有相同id的元素获得匹配时,该选择器将被触发。 Example

知道了这一点,我们可以结合这种技术与使用接近选择器像“”和“〜”通过目标元素选择任何其他元素谁获得匹配的当前网址的哈希。这样的例子就像you are asking

原文链接:https://www.f2er.com/css/222527.html

猜你在找的CSS相关文章