正文

css沿矩形边框运动

譬如朝露 V管理员/ / 0 评论/ 876阅读
05 19 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
    width:500px;
    height:500px;
    border:1px solid #CCC;
    margin:150px auto;
}
#wrap div {
    width:100px;
    height:100px;
    background:#000;
    animation:2s run linear infinite;
}

@keyframes run {
    25% {
    transform:translateX(400px);
}
50% {
    transform:translate(400px,400px);
}
75% {
    transform:translate(0,400px);
}
100% {
    transform:translate(0,0);
}
}
    </style>
</head>

<body>
    <div id="wrap">
        <div></div>
    </div>
</body>

</html>

https://www.jq22.com/webqd6201

文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。