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

来源：互联网发布：亚瑟士t4c1n4993 知乎编辑：程序博客网时间：2024/05/16 07:48
<!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>
动画如图所示：
HTML5动画翻转音乐盒子效果
阅读全文
0 0