微信小程序音乐播放器旋转动画

最新推荐文章于 2023-07-11 10:48:07 发布

Black Anger

最新推荐文章于 2023-07-11 10:48:07 发布

阅读量1.5k

点赞数 3

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45580341/article/details/116802179

版权

小程序专栏收录该内容

3 篇文章

订阅专栏

小程序播放器专辑界面旋转动画

二话不说看效果

在这里插入图片描述

首先是CSS样式

.music_on{
  animation: audio-rotate 8s linear infinite;
}
.audio_control{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
}
.audio_control button{
  width:200rpx;
  height:80rpx; 
  line-height:80rpx;
}
 
/* 旋转动画 */
@keyframes audio-rotate {
  0% {
    transform: rotateZ(0deg);
  }
 
  100% {
    transform: rotateZ(360deg);
  }
}

在这里插入图片描述