/* 开始（动画代码 */

@keyframes dhmc1{

    }
  
@keyframes clock{
          0%{ transform:rotate(0deg)} 
          100%{ transform:rotate(360deg); } 
        }
  
#clock{
  animation-name:clock;  /* 引用动画 函数 */
  transition-property:all; /* 动画效果：全开 */
  animation-duration:2s;  /* 动画周期 */
  /* animation-timing-function:linear;  动画线性：匀速 */
  animation-delay:0s;  /* 延迟开始：0s */
  /* animation-iteration-count:3;   动画次数：3次 */
  animation-direction:alternate; /* 动画循环 次数：无线循环 */
  animation-fill-mode:both;  /* 动画填充模式 */
  }
    
#parent{
  /*perspective:200px;   动画透视度  */
}

#d1{
    /*transform:rotate3D(1,1,1,45deg);   画面 深度 倾斜角 */
    }

#d4{
  animation-name:clock;
  transition-property:all;  /* 动画效果全开 */
  animation-duration:5s; /*  动画周期时间 */
  animation-timing-function:linear;   /*动画线性：匀速 */
  animation-iteration-count:infinite; /* 动画循环次数：无限循环 */
    }

#d4:hover{
  border-radius: 50%;
    background-color:pink;
    transform:rotate(-360deg); /* 图片旋转的角度 */
    }



  /*  呼吸灯 STA */
    @keyframes dhmc22{
      000%{border-radius:00%;background:;}
      050%{border-radius:50%;background:pink;}
      100%{border-radius:00%;background:;}
    }
    
    #span2{
      width:12px;height:12px;
      animation-name:dhmc22;  /* 引用上述 dhmc1 的动画效果 */
      transition-property:all;  /* 动画效果全开 */
      animation-duration:1.67s; /*  动画周期时间 */
      animation-iteration-count:infinite; /* 动画循环次数：无限循环 */
    }
  
  #span2:hover{  /* 鼠标滑入 效果 */
    background-color: yellow;
  } 
  /*  呼吸灯 END */ 





/* play */

@keyframes play{
    0%{ transform:rotate(0deg)} 
    100%{ transform:rotate(360deg); } 
}

#play{
    animation-name:play;  /* 引用动画 函数 */
    transition-property:all; /* 动画效果：全开 */
    /* animation-play-state: paused; */
    animation-duration:2s;  /* 动画周期 */
    /* animation-timing-function:linear;  动画线性：匀速 */
    animation-delay:0s;  /* 延迟开始：0s */
    /* animation-iteration-count:3;   动画次数：3次 */
    animation-direction:alternate; /* 动画循环 次数：无线循环 */
    animation-fill-mode:both;  /* 动画填充模式 */
}

#playPicture{
    animation-name:play;
    transition-property:all;  /* 动画效果全开 */
    animation-timing-function:linear;   /*动画线性：匀速 */
    animation-iteration-count:infinite; /* 动画循环次数：无限循环 */
    animation-play-state: paused;
    animation-duration:5s; /*  动画周期时间 */  }

#playPicture:hover{
    border-radius: 50%;
    background-color:pink;
    transform:rotate(-360deg); /* 图片旋转的角度 */
  }

/* 应用动画到元素上，初始设为暂停状态 */
.animated-element {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 50px auto;
    animation-play-state: paused;
    animation: play 5s linear infinite;
}

/* 结束（动画代码 */