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

<!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动画-翻转音乐盒效果动画相关推荐

php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析 – 码农网
1.HTML5 Canvas瀑布动画超逼真这次我们来分享一款很酷的HTML5 Canvas瀑布动画,瀑布动画非常逼真.整个瀑布动画像是从石头缝里流出来的溪水,然后沿着悬崖飞落下来,效果非常不错. ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
照片转换为动画 html5,如何使用html5让图片转圈的动画效果
如何使用html5让图片转圈的动画效果发布时间:2020-10-26 09:33:22 来源:亿速云阅读:78 作者:小新如何使用html5让图片转圈的动画效果?这个问题可能是我们日常学习或工作 ...
Android,翻转卡片动画,实现翻转卡片的动画效果
在Android设计中, 经常会使用卡片元素, 正面显示图片或主要信息, 背面显示详细内容, 如网易有道词典的单词翻转和海底捞的食谱展示. 实现卡片视图非常容易, 那么如何实现翻转动画呢? 在TB吃海 ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html 开关窗效果,逼真的HTML5+CSS3窗帘拉开收起动画特效
逼真的HTML5+CSS3窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inheri ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...

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

HTML5动画-翻转音乐盒效果动画相关推荐

最新文章

热门文章