@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
参考
CSS3 @keyframes 规则
CSS3 animation(动画) 属性