movingSquare——之前遗留的问题

来源:互联网 发布:天谕玉虚捏脸数据分享 编辑:程序博客网 时间:2024/05/20 03:45

实现一个这样的动画:


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

下次写。。。。


原创粉丝点击