动画01
Posted yuanxiangguang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画01相关的知识，希望对你有一定的参考价值。
1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 div 10 width: 100px; 11 height: 100px; 12 background-color: pink; 13 border-radius: 50%; 14 /* infinite 无限次 alternate无线循环 */ 15 animation: myAni 2s ease 0s infinite alternate; 16 /* position: absolute; */ 17 /* 动画属性 :---> 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */ 18 19 20 @keyframes myAni 21 from 22 transform: translateX(0) 23 24 to 25 transform: translateX(500px) 26 27 28 29 @-webkit-keyframes myAni 30 from 31 /* 从某个地方开始 */ 32 transform: translateX(0) 33 34 to 35 /* 从某个地方结束 */ 36 transform: translateX(500px) 37 38 39 </style> 40 </head> 41 42 <body> 43 <div> 44 45 </div> 46 </body> 47 48 </html>
以上是关于动画01的主要内容，如果未能解决你的问题，请参考以下文章