概述 · 前端

## 概述动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. ## 语法格式 ``` animation : 动画名称动画时间运动曲线何时开始播放次数是否反方向 ``` ## 模仿网易云唱片效果 ``` img { width: 200px; height: 200px; background-color: pink; border-radius: 50%; /*动画名称是自定义的*/ animation: go 20s linear 0s infinite; /*引用动画,infinite是无限循环*/ } @keyframes go { /*定义动画*/ from { //起始点 transform: rotate(0deg); } to { //结束点 transform: rotate(360deg); } } </style> </head> <body> <img src="1.jpg" alt=""> </body> ``` ## 案例 ``` img { width: 200px; height: 200px; border-radius: 50%; /*动画名称是自定义的*/ animation: go 10s linear 0s infinite; /*引用动画*/ } @keyframes go { /*定义动画*/ 0% { /*相当于刚才的from*/ transform: translate3d(0, 0, 0); } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { /*相当于结束*/ transform: translate3d(0, 0, 0); } } </style> </head> <body> <img src="1.jpg" alt=""> </body> ```