CSS 创建高级加载屏幕
在浏览网站的不同页面时,开发人员需在网站中添加一个加载屏幕;以便网站有足够的时间在网页之间切换。加载屏幕是一种有效的方式,在网页加载/初始化时,用户可以等待页面加载。
如何创建加载屏幕
要创建加载屏幕,我们可以使用HTML和CSS。首先,我们将创建一个div元素,在其中放置一个标题标签,显示百分比。
然后,我们将使用CSS属性,如border-radius来分配高度和宽度,并给加载元素添加动画效果。我们还将使用over-flow属性隐藏元素,以便只能看到主要内容。
语法
下面是over-flow属性的语法 –
在上面的语法中,您可以看到与overflow属性一起使用的值可以是隐藏元素的hidden值,使元素可见的visible值和在隐藏元素时添加滑块的scroll属性。
让我们看一个示例来更好地理解加载屏幕。
示例
在下面给出的代码中,我们声明了标题标签,并声明了一个div容器,在其中创建了我们的加载容器,然后填充了颜色并添加了一个动画。之后,我们在容器中添加了一个第二个标题来显示百分比,并添加了一个旋转360度的关键帧函数。让我们看一下代码的输出。
你可以在上面的输出中看到,首先我们声明了标题标签,然后是包含颜色的容器,显示了我们的第二个标题,接着是容器中的动画。动画旋转了360度,位于百分比标题上方。
示例
以下是创建一个高级加载屏幕的另一个示例。在以下示例中,我们声明了一个div元素,然后给它一个类来使用CSS属性样式化元素。我们给边框添加了黑色和红色的颜色,并为它添加了一个动画,使用keyframes函数使容器旋转360度。上面的代码演示了如何在网页中添加一个加载屏幕。
在输出中,您可以看到两个颜色的旋转360度,并给用户一种页面正在加载的印象。通过使用对齐属性,您可以将加载器居中对齐到页面。
注意 - 关键帧属性是CSS的属性,它使开发人员能够在不使用JavaScript的情况下为HTML元素添加动画效果,并且这些关键帧指定了元素的样式。
关键帧属性指定动画运行的时间,所使用的过渡效果应平滑准确。必须指定百分比,并确保动画兼容所有浏览器。
结论
Web开发人员根据他们正在处理的项目使用不同类型的样式和动画来创建加载屏幕。在加载屏幕上稍微做一些不同并付出创意的努力是必要的,因为用户通常会被加载屏幕的外观和加载页面所花费的时间所分散注意力。这些加载屏幕的主要目标是使网站具有互动性,而不是让用户在页面加载/初始化时感到无聊。