css图片旋转点击暂停

最新推荐文章于 2023-12-23 15:38:50 发布

戒不掉的伤怀

最新推荐文章于 2023-12-23 15:38:50 发布

阅读量924

点赞数

分类专栏：工作类

本文链接：https://blog.csdn.net/u013141712/article/details/118331306

版权

工作类专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<div id="audio_btn" class="rotate">
      
</div>
<audio loop src="daoxiang.mp3" id="media" autoplay="" preload="" controls></audio>

<style>
#audio_btn {
        width: 60px;
        height: 60px;
        border-radius:50%;
        background-image: url(a.jpg);
        background-size: contain;
        }
 
.rotate {
        -webkit-animation: rotating 5s linear infinite;
        -moz-animation: rotating 5s linear infinite;
        -o-animation: rotating 5s linear infinite;
        animation: rotating 5s linear infinite;

}

.kuek{
        -webkit-animation: rotating 5s linear infinite;
        -moz-animation: rotating 5s linear infinite;
        -o-animation: rotating 5s linear infinite;
        animation: rotating 5s linear infinite;
        animation-play-state: paused;

}
@-webkit-keyframes rotating {
        from { -webkit-transform: rotate(0) }
        to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
        from { transform: rotate(0) }
        to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
        from { -moz-transform: rotate(0) }
        to { -moz-transform: rotate(360deg) }
}
        </style>
<script>
var x = document.getElementById("media"); 
$(function(){
        $("#audio_btn").click(function(){
                if($(this).hasClass("kuek")){
                        $(this).toggleClass("kuek");
                }
                $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停

                
                //控制背景音乐 播放或暂停            
                if($(this).hasClass("rotate")){
                        x.play();
                }else{
                        $(this).toggleClass("kuek"); //控制音乐图标暂停
                         x.pause();
                }
        })
});
       
</script>