html加载动画进入网页
时间: 2023-08-10 14:02:56 浏览: 124
加载页面动画
可以使用CSS实现一个简单的加载动画。以下是一个例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Loading Animation</title>
<style>
/* 设置背景色 */
body {
background-color: #f2f2f2;
}
/* 定义加载动画 */
.loading {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
border: 4px solid #000;
animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
/* 定义加载动画的旋转效果 */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 加载动画的HTML代码 -->
<div class="loading"></div>
</body>
</html>
```
在上面的例子中,我们定义了一个名为`loading`的CSS类,用于设置加载动画的样式。然后在HTML中使用一个`<div>`元素,将该类应用于该元素,从而实现了加载动画的效果。
阅读全文