帮我用html实现移动动画
以下是一个简单的HTML移动动画实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动动画</title>
<style>
#box {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: red;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
top: 50px;
left: 50px;
}
50% {
top: 200px;
left: 200px;
}
100% {
top: 50px;
left: 50px;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
在上面的代码中,我们使用了CSS的animation属性来实现移动动画。通过@keyframes定义一系列关键帧,然后将其应用到元素上即可。在这个例子中,我们定义了一个名为move的动画,使元素在2秒内从左上角移动到右下角,再回到左上角,不断循环播放。
原文地址: https://www.cveoy.top/t/topic/baML 著作权归作者所有。请勿转载和采集!