CSS3 Transition, HTML5 audio

Free to practice practiced hand, materials from the "Html5+css3+jquery application of the United States"

The book is too long-winded, the code used to do an effect,

Demo download

Relatively simple, don't wordy, stick to the main code and 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;}

    varBanner_audio =NewAudio (); varWEBM =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 ();    }); functionISSUPPORTWEBM () {varTester = document.createelement (' Audio '); returnTester.canplaytype (' AUDIO/WEBM '); }

CSS3 Transition, HTML5 audio