因為今天8月28日就是中國的情人節—七夕，作為程序猿一枚的我就只有在家敲代碼咯！但我還是有一顆脫單的心；製作了h5+css+js界面祝小伙伴們：七夕快樂
具體的功能有：
1.下雪的背景動畫
2.下面的文字逐字顯示，並伴有語音
3.中部的圖片3d輪播
附上源碼:
<!doctype html><html> <head> <meta charset=UTF-8> <meta name=Keywords content=關鍵字，關鍵詞> <meta name=Description content=描述信息> <title>七夕快樂</title > <!--css 樣式層疊樣式表--> <style type=text/css> *{margin:0;padding:0;} html,body{width:100%;height:100%;} body{background :url(images/3.jpg);background-size:cover;overflow:hidden;} /*top start*/ .top{width:400px;height:100px;margin:60px auto;font-size:30px;font -family:華文行楷;color:#fff;} /*background:-webkit-linear-gradient(45deg,#ff0000,#ff0099,#ffff00,#33ff00,#3300cc,#000000);*/ /*end top */ /*box start*/ .box{width:310px;height:310px;margin:auto;perspective:800px;} .box .pic{position:relative;transform-style:preserve-3d;/*搭載3d環境*/animation:play 10s linear infinite;} /*animation:play 速度勻速循環;*/ .box ul li{list-style:none;position:absolute;top:0;left:0;} /*end box* / #text{width:500px;height:200px;margin:auto;color:#6fade1;margin:auto;font-size:24px;font-family:方正喵嗚體;} /*定義一個關鍵幀*/ @ keyframes play{ from{transform:rotateY(0deg);} to{transform:rotateY(360deg);} } </style> </head> <body> <!--top start--> <div class=top> <!--marquee滾動標籤behaviod=alternate碰撞--> <marquee behavior=alternate>時光不老我們不散</marquee> </div> <!--end top--> <!--box start-- > <div class=box> <div class=pic> <ul> <!--圖片四要素src路徑width height alt描述優化--> <li><img src=images/1.png width= height= < li><img src=images/2.png width= height= <li><img src=images/3.png width= height= <li><img src=images/4.png width= height= <li> <img src=images/5.png width= height= <li><img src=images/6.png width= height= </ul> </div> </div> <!--end box--> <div id=text></div> <!--插入背景音樂--> <embed src=周杰倫+-+告白氣球.mp3/> <!--引入jQuery類庫--> <script type=text /javascript src=js/jquery-1.11.1.min.js></script> <!--下雪的動畫背景js--> <script type=text/javascript src=js/trans.js></ script> <script> //拿到每一個li $(.pic ul li).each(function(i){ //每一張圖片的旋轉角度是不相同的var deg=360/$(.pic ul li).size(); //當前的li對象$(this).css({transform:rotateY(+deg*i+deg) translateZ(216px)}); //調用下雪的動畫$.fn. snow({ minSize:10, maxSize:15, newOn:500, flakeColor:#fff }); }); var i=0; var str=把天上的銀河截下，匯成愛情的心河，流進你的心裡;把天上的鵲橋摘下，變成愛情的心橋，搭在你的心裡。給你此生不變的摯愛. 七夕快樂! ! !; //語音var obj = $('<audio src=http://fanyi.baidu.com/gettts?lan=zh&text='+str+'& ;spd=5&sorce=web autoplay></audio>'); $(body).append(obj); window.onload= function typing(){ //獲取div var mydiv=document.getElementById(text); //實現逐字顯示mydiv.innerHTML+=str.charAt(i); i++; //定時器var id = setTimeout(typing,100); //判斷str顯示完後清空setTimeout if(i==str.length ){ clearTimeout(id); } } </script> </body></html>總結以上所述是小編給大家介紹的html5+CSS3+JS實現七夕言情功能代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！