用CSS+HTML写一个项目加载主页,要求:
时间: 2024-03-09 10:47:40 浏览: 16
好的,以下是一个简单的项目加载主页的 CSS 和 HTML 代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>项目加载主页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader"></div>
<h1>项目名称</h1>
<p>正在加载,请稍候...</p>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 100px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h1 {
text-align: center;
margin-top: 50px;
}
p {
text-align: center;
font-size: 20px;
color: #888;
margin-top: 20px;
}
```
解释:
- HTML中,我们首先引入了一个CSS文件`style.css`,然后在`body`标签中添加了一个`div`元素,用于显示加载动画。然后添加了一个`h1`标题和一个`p`段落,用于显示项目名称和提示信息。
- CSS中,我们首先设置了`body`的字体和背景颜色。然后定义了一个名为`loader`的类,用于设置加载动画的样式。我们使用了CSS3的`border`属性来创建一个圆形边框,然后设置了边框颜色和宽度,以及边框的圆角半径。接着使用了CSS3的`animation`属性来定义了一个名为`spin`的旋转动画,用于让边框旋转起来。最后设置了该元素的宽度、高度和居中显示的位置。接下来,我们定义了`h1`和`p`元素的样式,分别用于显示项目名称和提示信息。