movingSquare——之前遗留的问题

最新推荐文章于 2024-09-04 15:47:59 发布

Shellin_F

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量336

点赞数

分类专栏： CSS 文章标签：动画 css3 html

本文链接：https://blog.csdn.net/Shellin_F/article/details/72461596

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现一个这样的动画：

用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实现：

下次写。。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Shellin_F

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
movingSquare——之前遗留的问题

实现一个这样的动画：用CSS3实现：HTML： movingSquare CSS：#d1 { background-color:#00ff90; position:absolute; height:100px; width:100px;}#d2 { backgr
复制链接

扫一扫