编写一个简单的HTML动画
时间: 2024-05-07 18:22:58 浏览: 49
简单的动画网页
以下是一个简单的HTML动画示例,使用CSS3的@keyframes规则和animation属性:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Animation</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {left: 0;}
50% {left: 200px;}
100% {left: 0;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
```
这个动画会让一个红色的正方形从左往右移动,然后从右往左移动,不断重复。可以修改@keyframes规则中的百分比来调整动画效果。
阅读全文