编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
​
<style> 
​
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
}
​
#main div {
  width: 70px;
  height: 70px;
}
​
#myGreenDIV
{
animation:mymove 5s infinite;
/*Safari 和 Chrome:*/
-webkit-animation:mymove 5s infinite;
}
​
@keyframes mymove
{
50% {order:6;}
}
​
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
50% {order:6;}
}
</style>
​
</head>
<body>
​
<p>改变绿色 DIV 元素的顺序，从 1 到 6 再回到 1：<p>
​
<div id="main">
  <div style="background-color:lightgreen;order:1;" id="myGreenDIV"></div>
  <div style="background-color:coral;order:2;"></div>
  <div style="background-color:lightblue;order:3;"></div>
  <div style="background-color:pink;order:4;"></div>
</div>
​
<p>在 CSS 中，order 属性是 <em>可动画化（animatable）</em> 的。</p>
​
<p><strong>注意：</strong>Chrome 不支持动画的 order 属性。</p>
<p>Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。</p>
<p>Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。</p>
​
</body>
</html>
实例代码
运行结果