欢迎您 本站地址:
复制网址
手机查看
切换背景
返回首页
返回编程教学
诗词名句
名人故事
狗叫音效
男生头像帅气
微信开发源码
中医百科
绘本唐诗
绘本儿歌
源代码：
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>
运行结果：
小库提示
扫描下方二维码，访问手机版。
打赏
关闭