首页 > 代码库 > css3 过渡，html5 audio
css3 过渡，html5 audio
闲来无事练练手，素材来自《html5+css3+jquery应用之美》
书上写的太啰嗦了，就用给的代码做了个做了个效果，
demo下载
比较简单，就不罗嗦了，贴一下主要代码和jquery
.banner{ width: 728px; height: 176px; display: block; margin:40px auto; border:1px solid #333; position: relative; background: url(../images/banner-arrow.png) 20px 190px no-repeat, url(../images/banner-photo.png) -10px 190px no-repeat, url(../images/banner-09.png) 20px -354px no-repeat, url(../images/banner-bg.png) left top no-repeat; transition: all 0.2s ease-in 0.2s; -moz-transition: all 0.2s ease-in 0.2s; -webkit-transition: all 0.2s ease-in 0.2s; -o-transition: all 0.2s ease-in 0.2s;}.banner:hover{ background-position:20px 90%, -10px 20px, 20px center, left top;}.banner-logo{ position: absolute; top: 21px; left: 210px; transition: all 0.2s ease-in 0.2s; -moz-transition: all 0.2s ease-in 0.2s; -webkit-transition: all 0.2s ease-in 0.2s; -o-transition: all 0.2s ease-in 0.2s;}.banner:hover .banner-logo{ left: 540px;}
var banner_audio = new Audio(); var webm = isSupportWebM(); if(webm){ banner_audio.src = ‘media/banner_sound.webm‘; } else{ banner_audio.src = ‘media/banner_sound.mp3‘ } $(‘.banner‘).mouseenter(function(){ banner_audio.load(); banner_audio.play(); }); $(‘.banner‘).mouseleave(function(){ banner_audio.pause(); }); function isSupportWebM(){ var tester = document.createElement(‘audio‘); return tester.canPlayType(‘audio/webm‘); }
css3 过渡，html5 audio
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。