接下來就帶領(lǐng)大家做一個微信場景。
備注：通過本套教程的學(xué)習(xí)，能夠?qū)W到觸摸事件的使用，多點觸摸技術(shù)，手勢事件滑動方向判斷的算法，CSS3動畫調(diào)用，文字動畫（動畫全部自定義），音樂的播放和控制，CSS3動畫的控制，網(wǎng)絡(luò)字體的使用，js操作DOM等知識。大家學(xué)習(xí)過程中遇到任何問題可以加我QQ：1416759661.
大致步驟如下：
001、效果預(yù)覽
002、創(chuàng)建項目
003、mete屬性和徑向漸變
004、添加圖片
005、定位圖片
006、監(jiān)聽觸摸開始事件
007、監(jiān)聽觸摸結(jié)束事件
008、滑動方向判斷
009、上滑切換圖片
010、添加過渡動畫效果
011、調(diào)用動畫和重置屬性
012、下滑切換圖片
013、添加3d旋轉(zhuǎn)效果
014、添加文字效果
015、文字移動移動
016、文字樣式重置
017、文字旋轉(zhuǎn)效果
018、下滑文字效果
019、圓形音樂控制按鈕
020、按鈕旋轉(zhuǎn)動畫
021、停止旋轉(zhuǎn)動畫
022、控制音樂的播放與停止
023、自動調(diào)用動畫切換效果
先體驗下制作好的效果，使用微信掃描下面的二維碼就可以看到效果。
也可以點擊下面的鏈接查看效果，由于是國外的服務(wù)器，可能比較慢。
https://1416759661.github.io/changjing/
詳細代碼：
<!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;}}
* {margin: 0;padding: 0;}
html,
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 class="loding">加載中<img src="images/wait.gif"></div><ul><li><img src="images/01.png" /><p class="text1">兩情若是久長時，</p><p class="text2">又豈在朝朝暮暮！</p></li><li><img src="images/02.png" /><p class="text1">當(dāng)你老了，</p><p class="text2">頭白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然愛慕你的美麗！</p><p class="text5">思念直到永遠</p></li><li><img src="images/03.png" /><p class="text1">兩情若是久長時，</p><p class="text2">又豈在朝朝暮暮！</p></li><li><img src="images/04.png" /><p class="text1">輕輕的我走了，</p><p class="text2">正如我輕輕的來！</p><p class="text3">我揮一揮衣袖，</p><p class="text4">不帶走一片云彩！</p></li><li><img src="images/05.png" /><p class="text1">CSS3教程上線啦</p><p class="text2">QQ：1416759661！</p></li><li><img src="images/06.png" /><p class="text1">當(dāng)你老了，</p><p class="text2">頭白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然愛慕你的美麗！</p><p class="text5">思念直到永遠</p></li><li><img src="images/07.png" /><p class="text1">兩情若是久長時，</p><p class="text2">又豈在朝朝暮暮！</p></li><li><img src="images/08.png" /><p class="text1">輕輕的我走了，</p><p class="text2">正如我輕輕的來！</p><p class="text3">我揮一揮衣袖，</p><p class="text4">不帶走一片云彩！</p></li><li><img src="images/09.png" /><p class="text1">CSS3教程上線啦</p><p class="text2">QQ：1416759661！</p></li></ul><audio src="music/music.mp3" autoplay="autoplay" loop="loop" id="audioPlay"></audio><div class="musicbox" id="musicbox"></div><script src="js/zepto_1.1.3.js?1.1.11" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// $(function(){// // });// $(window).load(function(){// $(".loding").hide();// $("ul").show();// }); window.addEventListener('load', function(){
$(".loding").hide();
$("ul").show();
}, false); var audio = document.getElementById("audioPlay");var musicbox=document.getElementById("musicbox");
document.getElementById("musicbox").onclick=function(e){if(this.className=="musicbox")
{
audio.pause();
musicbox.className="musicbox closeroate";
}else{
audio.loop = true;
audio.play(); this.className="musicbox";
}
};
var timer1=setInterval(function(){
sliderNext();
},13000);
sliderNext();var container = document.getElementById("mybox");var start_x;var start_y;var end_x;var end_y;
container.addEventListener("touchstart", function(event) {
clearInterval(timer1);if(event.targetTouches.length == 1) {var touch = event.targetTouches[0];
start_x = touch.pageX;
start_y = touch.pageY;
};
}, {
passive: false});
container.addEventListener("touchmove", function(event) {
event.preventDefault();if(event.targetTouches.length == 1) {var touch = event.targetTouches[0];
move_x = touch.pageX;
move_y = touch.pageY;
};
}, {
passive: false});
container.addEventListener("touchend", function(event) {if(event.changedTouches.length == 1) {var touch = event.changedTouches[0];
end_x = touch.pageX;
end_y = touch.pageY;
};var x=end_x-start_x;var y=end_y-start_y; if(Math.abs(x) > Math.abs(y) && x > 0){
console.log('向右');
}else if(Math.abs(x) > Math.abs(y) && x < 0){
console.log('向左');
}else if(Math.abs(x) < Math.abs(y) && y > 0){
console.log('向下');
sliderPre();
}else if(Math.abs(x) < Math.abs(y) && y < 0){
console.log('向上');
sliderNext();
}
timer1=setInterval(function(){
sliderNext();
},13000);
}, {
passive: false});
function sliderNext() { var lastli = $("li:last-child")[0];
$("li:last-child").prependTo($("ul"));
$("li").removeAttr("style");
lastli = $("li:last-child")[0];
lastli.style.webkitAnimation = "dhfadein 3s 1 forwards";
$("p").removeAttr("style");
lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li動畫執(zhí)行完畢！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"});
$(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"});
$(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"});
$(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"});
$(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"});
}, false);
}function sliderPre() {
$("p").removeAttr("style");
$("li:first-child").appendTo($("ul"));
$("li").removeAttr("style"); var lastli = $("li:last-child")[0];
lastli.style.webkitAnimation = "dhfadein 3s 1 forwards";
lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li動畫執(zhí)行完畢！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"});
$(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"});
$(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"});
$(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"});
$(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"});
}, false);
}
</script></body></html>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
