kk梦空间html5魅族手机微信专题页模板源码.rar资源-CSDN文库

共30个文件

png：24个

jpg：2个

js：2个

版权申诉

微信

136 浏览量 2024-04-07 01:20:54 上传评论收藏 1.85MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

【kk梦空间】html5魅族手机微信专题页模板源码.rar （30个子文件）

img

8-1.png 14KB

1-1.png 66KB

8-2.png 15KB

music.png 1KB

9-1.png 150KB

8-5.png 16KB

2-1.png 24KB

arrow.png 243B

12-2.png 2KB

logo.png 11KB

1-3.png 69KB

4-1.png 58KB

5-2.png 254KB

7-2.png 149KB

6-2.png 177KB

1-2.png 52KB

5-1.png 34KB

music-stop.png 1KB

share_meilannote.jpg 15KB

1-5.png 43KB

4-2.png 79KB

8-3.png 15KB

1-4.png 70KB

3-1.png 70KB

6-1.jpg 195KB

8-4.png 16KB

index.html 27KB

jquery-2.1.1.min.js 82KB

hm.js 16KB

071.mp3 352KB

<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"> <title>魅蓝 note - 青年良品</title> <meta name="description" content="魅族科技于 2014 年 12 月 23 日发布全新品牌魅蓝，魅蓝 note 手机 999 元起。"/> <link rel="image_src" type="image/jpeg" href="img/share_meilannote.jpg"> <style type="text/css"> body,h1,h2,h3,p,dl,dd,ul,th,td,form,input,button,textarea{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:normal}html,body{overflow-y:hidden}body{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;font-size:24px;text-align:center}html,#fullscreen{display:block;padding:0;margin:0;width:100%;height:100%}img{width:100%;height:auto;vertical-align:top}a{text-decoration:none}.front_load{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999998}.loading_bg{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:999998;background-color:#fff}.loading_img{position:absolute;top:45%;z-index:999999;width:100%}.spinner{margin:0 auto;width:30px;height:30px;position:relative}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#00a7ea;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}} </style> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "hm.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body> <div class="front_load"> <div class="loading loading_bg"></div> <div class="mx4_imgs loading loading_img"> <div class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> </div> </div> <style type="text/css"> html,body{overflow-y:hidden}body{position:absolute}html,#fullscreen{padding:0;margin:0;width:100%;height:100%}img{width:100%;height:auto;vertical-align:top}#front_home{position:relative;z-index:999;top:0;-webkit-transform:translate3d(0,0,0) scale(1.85)}#front_home{position:relative;z-index:999;top:0;-webkit-transform:translate3d(0,0,0) scale(1.85)}.mz_img{width:100%}#fullscreen{position:relative;top:0;left:0;right:0;bottom:0;z-index:10;width:100%;max-width:768px;height:100%;margin:0 auto;-webkit-transition:all .41s;-webkit-transition-delay:cubic-bezier(1,0.07,0.6,0.645);-moz-transition:all .41s cubic-bezier(1,0.07,0.6,0.645);-o-transition:all .41s cubic-bezier(1,0.07,0.6,0.645);transition:all .41s cubic-bezier(1,0.07,0.6,0.645)}#fullscreen .header-left img{width:80px!important}#fullscreen .header-right img{width:24px}.section{display:block;position:absolute;z-index:19;top:100%;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.section .title{margin:20% 0 3% 0;text-align:center;color:#333;line-height:1.4em;font-size:1.846em}.section .info{text-align:left;margin-top:5%;padding:0 7%;color:#333;font-size:1em;line-height:1.538em}.p_relative{position:relative}.h_100{height:100%}.section_child{height:100%;width:100%;position:fixed;top:0;left:0;bottom:0;right:0;z-index:9998}.p_relative{position:relative;height:100%}#home{background:url('img/logo.png') no-repeat center 55px #f6f6f6;background-size:100%}#home .header-wrapper{position:relative;top:0;width:100%;-moz-transition:all .4s;-webkit-transition:all .4s;z-index:9999}#home .title{margin:30% 0 3% 0}#home .info{margin-top:5%;padding:0;text-align:center}#home .home_img img{position:absolute;bottom:0;left:0;opacity:0;-webkit-transform:translate3d(100%,0,0)}#home .home_img .mz_img:nth-child(1){-webkit-transition:all .3s ease-out 1.3s;-webkit-transform:translate3d(-9%,0,0)}#home .home_img .mz_img:nth-child(2){-webkit-transition:all .3s ease-out 1.3s;-webkit-transform:translate3d(9%,0,0)}#home .home_img .mz_img:nth-child(3){-webkit-transition:all .3s ease-out .5s;-webkit-transform:translate3d(-9%,0,0)}#home .home_img .mz_img:nth-child(4){-webkit-transition:all .3s ease-out .5s;-webkit-transform:translate3d(9%,0,0)}#home .home_img .mz_img:nth-child(5){opacity:1;-webkit-transform:translate3d(0,100%,0);-webkit-transition:all .3s ease-out .1s}#home .home_img .mz_img.on{opacity:1;-webkit-transform:translate3d(0,0,0)}#screen{background-color:#86cb3c}#screen p{color:#fff;opacity:0;-webkit-transition:opacity 1s ease-out .6s}#screen p.on{opacity:1}#screen .mz_img{margin-top:15%;-webkit-transition:all .5s ease-out 1s;-webkit-transform:translateY(-20px) scaleY(1.4)}#screen .mz_img.on{-webkit-transform:translateY(0) scaleY(1)}#cpu p{opacity:0;-webkit-transition:opacity 1s ease-out .5s}#cpu p.on{opacity:1}#cpu .mz_img{margin-top:15%}#dsds{background-color:#17b8ec;background-image:url("img/4-1.png");background-size:contain;background-repeat:no-repeat;background-position:right 15%}#dsds p{padding-left:14%;color:#fff;text-align:left}#dsds .info{width:52%}#dsds .mz_img{margin-top:11%;-webkit-transition:all 1s ease-out .5s;-webkit-transform:translateY(100%)}#dsds .mz_img.on{-webkit-transform:translateY(0)}#battery p{padding:0;text-align:left;color:#333}#battery .battery_text{position:absolute;top:50%;left:42%}#battery .info{width:90%}#battery .phone1{position:absolute;top:0;-webkit-transition:all .5s ease-out .5s;-webkit-transform:translateY(-100%)}#battery .phone1.on{-webkit-transform:translateY(0)}#battery .phone2{position:relative;margin-top:27%;-webkit-transition:all .5s ease-out 1.1s;-webkit-transform:translateX(-100%)}#battery .phone2.on{-webkit-transform:translateX(0)}#coms{background-image:url("img/6-1.jpg");backgroun

评论收藏

内容反馈

版权申诉