动画描述
让方块上下浮动
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方块上下浮动</title>
<style>
#myDIV
{
width:100px;
height:100px;
background:red;
/*Safari 和 Chrome:*/
}
#myDIV {
animation:mymove 1.5s infinite;
-webkit-animation:mymove 1.5s infinite;
}
@keyframes mymove{
0% {transform: translate(0px, 0px);}
50% {transform: translate(0px, -10px);}
100% {transform: translate(0px, 0px);}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
0% {transform: translate(0px, 0px);}
50% {transform: translate(0px, -10px);}
100% {transform: translate(0px, 0px);}
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
运行结果
也可将代码复制到菜鸟网站查看效果
点这里,把原来代码删除复制本代码