html5上下滑動(dòng)“翻頁”實(shí)現(xiàn)，是真正的翻頁

HTML5手機(jī)上下滑動(dòng)翻頁特效是一款手機(jī)移動(dòng)端觸屏滑動(dòng)效果實(shí)現(xiàn)完整代碼如下：

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括鹽池網(wǎng)站建設(shè)、鹽池網(wǎng)站制作、鹽池網(wǎng)頁制作以及鹽池網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鹽池網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鹽池省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1、html5頁面代碼

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手機(jī)頁面觸屏滑動(dòng)上下翻頁特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

section class="u-alert"

? img style="display:none;" src="./hamer_files/loading_large.gif"

? div class="alert-loading z-move"

? ? ? div class="cycleWrap" span class="cycle cycle-1"/span

? ? ? ? ? span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

? ? ? /div

? ? ? div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

? ? ? /div

? /div

/section

section class="u-arrow"

? p class="css_sprite01"/p

/section

section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

? div class="translate-back" style="height: 918px;"

? ? ? div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

? ? ? ? ? div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div

? /div

/section

section class="u-pageLoading"

? img src="./hamer_files/load.gif" alt="loading"

/section

script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script

script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script

script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script

/body/html

2、css代碼：

@charset "utf-8";

.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}

.ad_foot li a {display:block;}

.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}

.ad_foot li .l img {width:75px; width:75px;}

.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}

.ad_foot li .r p {color:#999; font-size:1.2em; }

.ad_foot li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

.lazy-img, .lazy-finish{background-color:#f0eded;}

.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}

.ad_foot{padding:15px 15px 0 15px;}

/*聲音播放按鈕*/

#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}

/*底部推薦*/

.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}

.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}

.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}

.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}

.ad_foot h3 a.active {color:#FFF; background:#FF9240;}

.magazine_1 li {

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;}

.magazine_1 li a {display:block;}

.magazine_1 li .l {width: 75px;

height: 75px;

float: left;

overflow: hidden;}

.magazine_1 li .l img {width:75px; height:75px;}

.magazine_1 li .r {width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;}

.magazine_1 li .r p {

color: #999;

font-size: 1.2em;

.magazine_1 li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

3、運(yùn)行效果如下：

HTML5翻頁效果文字特效怎么實(shí)現(xiàn)

首先是HTML代碼，非常簡(jiǎn)單，列出我們需要渲染的文字：

div?class="foo"

span?class="letter"?data-letter="A"A/span

span?class="letter"?data-letter="B"B/span

span?class="letter"?data-letter="C"C/span

span?class="letter"?data-letter="D"D/span

span?class="letter"?data-letter="E"E/span

span?class="letter"?data-letter="F"F/span

span?class="letter"?data-letter="G"G/span

span?class="letter"?data-letter="H"H/span

span?class="letter"?data-letter="I"I/span

span?class="letter"?data-letter="L"L/span

span?class="letter"?data-letter="M"M/span

span?class="letter"?data-letter="N"N/span

span?class="letter"?data-letter="O"O/span

span?class="letter"?data-letter="P"P/span

span?class="letter"?data-letter="Q"Q/span

span?class="letter"?data-letter="R"R/span

span?class="letter"?data-letter="S"S/span

span?class="letter"?data-letter="T"T/span

span?class="letter"?data-letter="U"U/span

span?class="letter"?data-letter="V"V/span

span?class="letter"?data-letter="Z"Z/span

/div

CSS3

.letter{

display:?inline-block;

font-weight:?900;

font-size:?8em;

margin:?0.2em;

position:?relative;

color:?#00B4F1;

transform-style:?preserve-3d;

perspective:?400;

z-index:?1;

}

這樣我們就讓這些字母安安靜靜的排列起來，并有了自己的背景顏色，等待強(qiáng)大的CSS3來渲染。

接下來我們要讓文字在鼠標(biāo)滑過的時(shí)候產(chǎn)生翻轉(zhuǎn)傾斜的動(dòng)畫。

.letter:before,?.letter:after{

position:absolute;

content:?attr(data-letter);

transform-origin:?top?left;

top:0;

left:0;

}

.letter,?.letter:before,?.letter:after{

transition:?all?0.3s?ease-in-out;

}

.letter:before{

color:?#fff;

text-shadow:

-1px?0px?1px?rgba(255,255,255,.8),

1px?0px?1px?rgba(0,0,0,.8);

z-index:?3;

transform:

rotateX(0deg)

rotateY(-15deg)

rotateZ(0deg);

}

.letter:after{

color:?rgba(0,0,0,.11);

z-index:2;

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(0deg)

rotateZ(0deg)

skew(0deg,1deg);

}

.letter:hover:before{

color:?#fafafa;

transform:

rotateX(0deg)

rotateY(-40deg)

rotateZ(0deg);

}

.letter:hover:after{

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(40deg)

rotateZ(0deg)

skew(0deg,22deg);

}

html5手機(jī)上下滑動(dòng)翻頁特效怎么設(shè)置

使用瀏覽器可以進(jìn)行手機(jī)效果測(cè)試：

現(xiàn)在各大瀏覽器都有這種功能了， 谷歌、QQ、360搜狐等；

首先打開網(wǎng)頁，點(diǎn)擊右鍵列表里會(huì)有“審查元素”，再點(diǎn)擊手機(jī)那個(gè)按鈕，就可以調(diào)整屏幕寬度查看手機(jī)效果。

分享文章：html5翻頁效果,css實(shí)現(xiàn)翻頁效果
文章來源：http://chinadenli.net/article14/dsdidde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、域名注冊(cè)、建站公司、微信小程序、網(wǎng)站策劃、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)