文档
(目录)
示例一
@keyframes 设置动画帧
1、from to 用于简单动画，只有起始帧和结束帧 2、百分比 用于复杂动画，动画不止两帧
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cover-wrap {
width: 200px;
height: 200px;
border: 40px solid #000000;
border-radius: 50%;
overflow: hidden;
}
@keyframes playmusic {
/* 起始位置 */
from {
transform: rotate(0deg);
}
/* 结束位置 */
to {
transform: rotate(360deg);
}
}
.cover {
width: 100%;
height: 100%;
object-fit: cover;
/* 动画属性 */
animation-name: playmusic;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
</style>
<div>animation@keyframes 实现 CD播放效果</div>
<div class="cover-wrap">
<img class="cover"
src="https://api.isoyu.com/bing_images.php">
</div>
在线Demo: animation-keyframes.html
示例二
<style>
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<style>
@keyframes rotate-infinite {
/* 起始位置 */
0% {
transform: rotate(0deg);
}
/* 结束位置 */
100% {
transform: rotate(360deg);
}
}
.animation-rotate {
/* linear 匀速运动 */
animation: 10s rotate-infinite infinite linear;
}
</style>
<div class="box animation-rotate"></div>
示例：https://mouday.github.io/front-end-demo/animation/index.html
