超文本标记语言
对于 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 秒,无限。