movingSquare——之前遺留的問題

實現一個這樣的動畫:


用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實現:

下次寫。。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章