css：animation@keyframes 实现 CD播放旋转动画效果

文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

示例一

@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

参考

• CSS3 @keyframes 规则
• CSS3 animation（动画） 属性
• css动画animation ___循环旋转