接下來就帶領(lǐng)大家做一個(gè)微信場景。

備注：通過本套教程的學(xué)習(xí)，能夠?qū)W到觸摸事件的使用，多點(diǎn)觸摸技術(shù)，手勢事件滑動(dòng)方向判斷的算法，CSS3動(dòng)畫調(diào)用，文字動(dòng)畫（動(dòng)畫全部自定義），音樂的播放和控制，CSS3動(dòng)畫的控制，網(wǎng)絡(luò)字體的使用，js操作DOM等知識(shí)。大家學(xué)習(xí)過程中遇到任何問題可以加我QQ：1416759661.

大致步驟如下：

001、效果預(yù)覽

002、創(chuàng)建項(xiàng)目

003、mete屬性和徑向漸變

004、添加圖片

005、定位圖片

006、監(jiān)聽觸摸開始事件

007、監(jiān)聽觸摸結(jié)束事件

008、滑動(dòng)方向判斷

009、上滑切換圖片

010、添加過渡動(dòng)畫效果

011、調(diào)用動(dòng)畫和重置屬性

012、下滑切換圖片

013、添加3d旋轉(zhuǎn)效果

014、添加文字效果

015、文字移動(dòng)移動(dòng)

016、文字樣式重置

017、文字旋轉(zhuǎn)效果

018、下滑文字效果

019、圓形音樂控制按鈕

020、按鈕旋轉(zhuǎn)動(dòng)畫

021、停止旋轉(zhuǎn)動(dòng)畫

022、控制音樂的播放與停止

023、自動(dòng)調(diào)用動(dòng)畫切換效果

先體驗(yàn)下制作好的效果，使用微信掃描下面的二維碼就可以看到效果。

也可以點(diǎn)擊下面的鏈接查看效果，由于是國外的服務(wù)器，可能比較慢。

http://1416759661.github.io/changjing/

詳細(xì)代碼：

 !DOCTYPE html html head meta charset= UTF-8 meta http-equiv= Pragma contect= no-cache meta http-equiv= Cache-Control contect= no-cache meta http-equiv= Expires contect= 0 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no meta name= renderer content= webkit title /title style type= text/css  @font-face {font-family:yyjcwfont;src:url(font/hand.ttf);} @-webkit-keyframes musicrotate {from { -webkit-transform: rotate(0);}to {-webkit-transform: rotate(360deg);}} @keyframes dhfadein {from { width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;z-index: 1;}to {width: 100%;height: 100%;top: 0;left: 0;opacity: 1;transform: rotate(720deg) rotateY(360deg);z-index: 100;}}
 @keyframes dhfadein-p1 {from { width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:50%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;  z-index: 100;}} @keyframes dhfadein-p2 {from { width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:60%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;  z-index: 100;}} @keyframes dhfadein-p3 {from { width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:70%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;  z-index: 100;}} @keyframes dhfadein-p4 {from { width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:80%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;  z-index: 100;}}  @keyframes dhfadein-p5 {from { width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}to {width:10%;left:80%;top:10%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;  z-index: 100;}} 
 body {width: 100%;height: 100%;} ul {width: 100%;height: 100%;list-style: none;overflow: hidden;position: relative;background:radial-gradient(white,#FC7D08);display: none;} ul li {width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;/* animation: dhfadein 3s 1 forwards;*/} ul li img {width: 100%;height: 100%;display: block;margin: 0 auto;opacity: 1;} p{font-family: yyjcwfont;} ul li p.text1 {width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text2 {width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}ul li p.text3 {width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text4 {width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}ul li p.text5 {width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;} .musicbox {background-image: url(images/m.jpg);background-position: 0 0;width:38px;height:38px;overflow: hidden;background-repeat: no-repeat;background-size: contain;border-radius:19px;position: absolute;z-index: 102;top: 10px;right:10px;cursor: pointer;animation:musicrotate 1s linear infinite;box-shadow: 0 0 15px 2px blue;} div.closeroate{animation-play-state: paused;} .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;} /style /head body id= mybox div >
以上就是微信場景制作的步驟及實(shí)例代碼的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。