movingSquare——之前遗留的问题

最新推荐文章于 2026-06-29 18:01:07 发布

原创最新推荐文章于 2026-06-29 18:01:07 发布 · 404 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#动画 #css3 #html

收录于

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用CSS3实现的简单动画案例，通过定义关键帧动画让一个黄色小方块在绿色背景的大方块中移动。文章提供了完整的HTML和CSS代码，并展示了如何设置动画属性。

实现一个这样的动画：

用CSS3实现：

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>movingSquare</title>
    <link href="movingSquare.css" rel="stylesheet" />
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
</body>
</html>

CSS：

#d1 {
    background-color:#00ff90;
    position:absolute;
    height:100px;
    width:100px;
}
#d2 {
    background-color:#ffd800;
    position:relative;
    height:10px;
    width:10px;
    
    animation:donghua 5s 1 ease-in;
   
}

@keyframes donghua {
    
    100% {
        transform:translate(90px,90px);
    }

}

用JS实现：

下次写。。。。