您的位置：首页 > Web前端 > HTML5

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

2017-07-06 10:03 302 查看

<!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>

动画如图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航