向下滚动动画 — 教程
向下滚动动画 — 教程
HTML
对于 HTML，我们只需要一个具有“scrolldown”类的元素。
<div class='scrolldown'></div>
CSS
对于 CSS，首先我们将设置 scrolldown 类的样式。
我们将位置设置为相对，宽度和高度设置为 30x50 像素，将边框半径设置为 25 像素，颜色设置为深蓝色（或任何其他颜色）。
.scrolldown {
位置：相对；
宽度：30px；
高度：50px；
边框：3px 纯色 rgb(0, 71, 106);
边框半径：25px；
}
现在我们将在“scrolldown”元素中使用它在伪元素之前创建一个滚动条。
我们将内容和位置设置为绝对值，底部属性设置为 30 像素，左侧设置为 50%，将 X 转换为 -50%，这会将这个元素水平放置在中心，垂直放置在中心上方一点点。
现在我们将宽度和高度设置为 6x6 像素，并添加与“向下滚动”元素的边框相同的蓝色背景颜色。
我们将边框圆角 100% 并添加框阴影，相同的蓝色，带有一点透明度。
动画只会增加元素的高度并将其向下移动一点。我们还将在这里更改不透明度以创建一点脉冲效果。
现在我们将这个动画设置在伪元素之前，持续时间为 2 秒，无限。
.scrolldown::before {
内容： ””;
位置：绝对；
底部：30px；
左：50%；
变换：translateX（-50%）；
宽度：6px；
高度：6px；
背景颜色：rgb(0, 71, 106);
边界半径：100%；
盒子阴影：0px -5px 3px 1px rgba(0, 71, 106, .6);
动画：scrolldown-anim 2s 无限；
}
@keyframes 向下滚动动画 {
0% {
不透明度：0；
高度：6px；
}
40% {
不透明度：1；
高度：10px；
}
80% {
不透明度：0；
变换：翻译（-50%，20px）；
高度：10px；
}
100% {
不透明度：0；
高度：3px；
}
}
使用 after 伪元素，我们将在滚动条下方创建一个箭头。
将内容和位置设置为绝对值，底部为 -12 像素，左侧为 50%，平移 X 为 -50%，将将此元素设置在水平中心的“向下滚动”元素下方一点。
我们将宽度和高度设置为 7x7 像素，右侧和底部边框设置为 2 像素纯蓝色（与我们之前使用的蓝色相同）。
旋转 45 度，这将创建一个箭头。
现在我们将创建一个脉冲动画，只需将不透明度从 0 更改为 0.7 并返回 0。
我们将此动画设置为大约在伪元素之后，持续时间为 2 秒，无限（与滚动条相同）。
.scrolldown::after {
内容： ””;
位置：绝对；
底部：-12px；
左：50%；
变换： translateX(-50%) 旋转(45deg);
宽度：7px；
高度：7px；
边框：2px 实心 rgb(0, 71, 106);
边框顶部：无；
左边框：无；
动画：脉冲2s无限；
}
@keyframes 脉冲 {
0% {
不透明度：0；
}
60% {
不透明度：0.7；
}
100% {
不透明度：0；
}
}
就是这样。
您可以找到视频教程和完整代码 这里 .
谢谢阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
