欢迎您 本站地址:
复制网址
手机查看
切换背景
源代码:
html编辑器
颜色值转换
点击运行
小库网 <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> <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>
运行结果:
小库提示
扫描下方二维码,访问手机版。
打赏
关闭