HTML5动画-翻转音乐盒效果动画

最新推荐文章于 2023-01-02 21:27:42 发布

xyphf_和派孔明

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量1.7k

点赞数 2

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/xyphf/article/details/74519655

版权

HTML5 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>翻转音乐盒</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    img{
        display:block;
        position: absolute;
        border:2px solid lightblue;
        border-radius:50%;
        /* 我们需要给img一个过渡让它的翻转有一个过程 */
        transition:all 1s;
    }
    div{
        position: relative;
        width:150px;
        margin:100px auto 0;
    }
    img:nth-child(2){
        /* 此时我们需要将翻转的中心点移动到元素的底边 */
        transform-origin: bottom;
    }
    /*div:hover img:nth-child(2){*/
        /* 当我们鼠标移上图片的时候我们让它沿着X轴翻转180度 */
        /*transform: rotateX(180deg);*/
    /*}*/
    /*div:hover img:nth-child(1){*/
        /* 当我们鼠标移上图片的时候让底图进行一个360度旋转 */
        /*transform: rotate(360deg);*/
    /*}*/
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        /* 设置一个开关控制我们音乐的播放 */
        var flag = false;
        $('.box').click(function(){
            // 点击的时候先将第二张图片的翻转实现
            if( !flag ){
                $('img:eq(1)').css('transform','rotateX(180deg)');
                $('img:eq(0)').css('transform','rotate(360deg)');

                /* 先将声音资载入，然后再进行播放 */
                $('audio').get(0).load();
                $('audio').get(0).play();

                flag = true;
            }else{
                //如果当前是播放的状态，我们就让元素回到默认状态
                $('img:eq(1)').css('transform','rotateX(0deg)');
                $('img:eq(0)').css('transform','rotate(0deg)');

                $('audio').get(0).pause();
            }
        });
    });
</script>
</head>
<body>
    <div class="box">
        <img src="img/musicb.jpg" width="150" height="150" />
        <img src="img/musict.jpg" width="150" height="150" />
    </div>
    <!-- 先在页面中用一个盒子将我们的音频存起来 -->
    <audio src="music/music.mp3"></audio>
</body>
</html>