html制作动画页面代码
时间: 2023-08-30 22:12:26 浏览: 65
要制作动画页面,可以使用HTML5和CSS3的一些新特性来实现。以下是一个简单的示例代码,可以创建一个渐变色的背景,并在其上添加一个旋转的圆形。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animated Page</title>
<style>
body {
background: linear-gradient(to bottom, #00bfff 0%, #1e90ff 100%);
overflow: hidden;
}
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #fff;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
```
在这个示例中,我们使用了CSS3的linear-gradient函数来创建一个渐变色的背景。我们还创建了一个.circle类,它将用于定义旋转的圆形的样式。我们使用了animation属性来定义旋转的动画,它将在2秒内完成,使用线性动画函数,无限循环。最后,我们将.circle元素添加到页面的中心。
这只是一个简单的示例,你可以使用更多的CSS3属性和JavaScript来创建更复杂的动画效果。