向下滚动动画 - 教程

超文本标记语言

对于 HTML，我们只需要一个具有“scrolldown”类的元素。

<div class='scrolldown'></div>

CSS

对于 CSS，首先我们将设置滚动类的样式。

我们将位置设置为相对，宽度和高度设置为 30x50 像素，将边框半径设置为 25 像素，将颜色设置为深蓝色（或任何其他颜色）。

.scrolldown {
   
    position: relative;
    width: 30px;
    height: 50px;
    border: 3px solid rgb(0, 71, 106);
    border-radius: 25px;
}

现在我们将使用 before 伪元素在“scrolldown”元素内创建一个滚动条。

我们将内容和位置设置为绝对，将底部属性设置为 30px，将左属性设置为 50%，将 X 平移设置为 -50%，这将使该元素水平放置在中心，垂直放置在中心上方一点点。

现在我们将宽度和高度设置为 6x6 px，并添加与“scrolldown”元素边框相同的蓝色背景颜色。

我们将边框圆化 100% 并添加框阴影，同样的蓝色，但有一点透明度。

动画只会增加元素的高度并将其向下移动一点。我们还将更改此处的不透明度以创建一点脉冲效果。

现在我们将此动画设置为伪元素之前，持续时间为 2 秒，无限。