数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS创建预加载器？
顾名思义，预加载器在网页加载时加载。可以把它看作是网页内容可见之前的加载页面或加载屏幕。使用CSS，我们可以轻松创建预加载器，并使用边框属性对其进行样式设置。加载器的动画使用关键帧设置。
设置加载器的样式
要设置加载器的样式，可以使用边框属性。高度和宽度也已设置 -
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
-webkit-animation: loader 2s linear infinite; /* Safari */
animation: loader 2s linear infinite;
}
无限动画加载器
要为加载器设置动画，我们使用了`animation`属性。它也适用于Safari网络浏览器。动画的名称设置为`loader`。为了使其永远旋转，设置了无限动画。我们在下面使用了简写动画属性。如果未使用简写属性，则使用`animation-iteration-count`设置旋转 -
webkit-animation: loader 2s linear infinite; /* Safari */ animation: loader 2s linear infinite;
设置加载器动画
使用`rotate()`方法设置动画的旋转。在其中设置旋转度数。`rotate()`使用CSS的`transform`属性设置 -
对于0%，度数设置为0度，而对于100%，度数设置为360度 -
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
针对不支持的网络浏览器的加载器动画
对于不支持动画和转换属性的网络浏览器，使用`-webkit-`前缀 -
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
示例
要使用CSS创建预加载器，代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
-webkit-animation: loader 2s linear infinite; /* Safari */
animation: loader 2s linear infinite;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Creating a pre Loader example</h1>
<div class="loader"></div>
</body>
</html>
更新于：2023年12月8日
231 次查看
广告