TE9手机微信场景
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>te9</title>
<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.css">
<link rel="stylesheet" href="scss/index.css">
<script src="js/flexible.js"></script>
<script src="js/flexible_css.js"></script>
</head>
<body>
<div id="swiper-container">
<i class="music-t"></i>
<i class="music-g">
<audio src="music/Hillsong%20United%20-%20From%20the%20Inside%20Out.mp3" autoplay></audio>
</i>
<span class="iconfont"></span>
<div class="swiper-wrapper">
<div class="swiper-slide box-1">
<h2 class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">曲之有道</h2>
<h3 class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">双面2.5D曲面屏幕，精彩不止一面</h3>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">
<img src="images/bg12-img1.png"/>
</p>
<span class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s">T9E双曲面屏幕闪耀登场</span>
</div>
<div class="swiper-slide box-2">
<h2 class="ani"
swiper-animate-effect="bounceInDown"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">性能与外观，为你而生</h2>
<p class="ani"
swiper-animate-effect="rotateInDownRight"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s"><img src="images/bg12-img2.png"/></p>
<span class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">T9E突破创新的优美设计风格，兼顾性能与美观，在万众瞩目中闪耀登场。玻璃与金属材质的结合缔造美妙外观。四色机身华彩飞扬。</span>
</div>
<div class="swiper-slide box-3">
<p>双2.5D弧面玻璃</p>
<p>真正打动人的美</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="images/bg3-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s">T9E用双面流畅的弧线玻璃来阐述极简的自然美学，宛如清晨的露珠骤然滴落，汇聚成莹润的机身，亦动亦静。</p>
</div>
<div class="swiper-slide box-4">
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">精彩不止一面</p>
<p class="ani"
swiper-animate-effect="fadeInLeft"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="images/bg4-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s">T9E机身背部同样采用了玻璃材质，触感非常的顺滑，背部整体的设计非常简单。</p>
</div>
<div class="swiper-slide box-5">
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="images/bg5-img.png"/></p>
<p class="ani"
swiper-animate-effect="bounceInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="0.3s">金属与玻璃的巧妙融合</p>
<p class="ani"
swiper-animate-effect="rotateInUpLeft"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s">金属中框使用高档的锌铝合金，结实稳固锻造坚毅品格。正背两面使用第三代康宁大猩猩玻璃，抗损性能值得信赖。 </p>
</div>
<div class="swiper-slide box-6">
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s"><img src="images/bg6-img.png"/></p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="2.5s"
swiper-animate-delay="0.3s"> 一体纤致高金属机身</p>
<p class="ani"
swiper-animate-effect="fadeInDown"
swiper-animate-duration="3s"
swiper-animate-delay="0.3s">尽享感握之美</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="4s"
swiper-animate-delay="0.3s"> T9E拥有一体成型的高质金属机身，精湛工艺让钱包机身显现动人曲线，机身与屏幕达到无缝贴合。</p></p>
</div>
<div class="swiper-slide box-7">
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2.5s"
swiper-animate-delay="0.8s">纤薄之行，流线之美</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="1.2s"> 强劲四核 畅想4G</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="4s"
swiper-animate-delay="1.5s">双卡双待，平衡之道</p>
<p class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay="0.3s"><img src="images/bg7-img.png" height="500" width="365"/></p>
</div>
<div class="swiper-slide box-8">
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="images/bg8-img1.png"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.8s"><img src="images/bg8-img2.png"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="1s">搭载全球领先的联发科MT673528纳米64位架构Cortex-A53四核处理器，处理器速度提升20%，能耗节省35%。</p>
</div>
<div class="swiper-slide box-9">
<p class="ani">
<img src="images/bg9.jpg" height="960" width="1344"/>
</p>
<p class="ani"
swiper-animate-effect="flash"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"><img src="images/bg9-img.png" height="480" width="576"/></p>
<p class="ani"
swiper-animate-effect="shake"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">800万后置+500万前置</p>
<p class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">T9E采用800万像素背照式传感器，F/2.2大光圈，前置摄像头诠释新自拍神器，消去讨厌的高光斑，让皮肤变得轻柔细腻。</p>
</div>
<div class="swiper-slide box-10">
<span class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">详细参数></span>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 屏幕显示：5.0英寸、1280*720（HD）、电容屏</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 手机制式：双卡双待 网络连接2G/3G/4G</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> CPU型号：MT6735 1.5GHz四核</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 摄像头： 800万像素（AF）+500万像素</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 电池容量：2000mAh </p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 存储容量：ROM8GB+RAM1GB</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 尺寸规格：143.1×72×8.2mm 重量：175g（含标准电池）</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 扩展内存：外置存储卡 MicroSD（TF）（最大支持32GB）</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 音频：MP3/MIDI/AAC/WMA/PCM/OGG视频：MP4/3GP</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 颜色：铂光金、星钻黑、金白、银白</p>
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 其他配置：蓝牙、FM、WLAN、重力、距离感应器</p>
<img class="ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="0.8s" src="images/bg3-img.png" height="424" width="480"/>
</div>
<div class="swiper-slide box-11">
<p class="ani"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s">点击按钮联系我们</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.5s">联系我们</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 深圳市爱我科技有限公司</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 营销总部咨询电话：0755-29619999-1890</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 联系人：罗女士</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 亦可登陆爱我科技官网：www.szlovme.com</p>
<p class="ani tip"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"> 爱我微信公众号：爱我手机</p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="0.8"><img src="images/bg11-img.jpg"/></p>
<p class="ani"
swiper-animate-effect="flipInY"
swiper-animate-duration="2s"
swiper-animate-delay="1s"><img src="images/love.png"/></p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="../bower_components/swiper/dist/js/swiper.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script>
(function(){
var swiper = new Swiper("#swiper-container",{
loop:true,
pagination:".swiper-pagination",
paginationType:"progress",
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
var musicC = document.querySelector(".music-t");
var musicNote = document.querySelector(".music-g");
var audio = document.querySelector("audio");
musicC.addEventListener("click",function(){
if(audio.paused){
audio.play();
musicNote.style.zIndex =4;
musicC.style.animationPlayState = "running";
}else {
musicNote.style.zIndex =-1;
audio.pause();
musicC.style.animationPlayState = "paused";
}
})
})()
</script>
</body>
</html>
scss:
*{
margin:0;padding:0;
}
a{
text-decoration:none;
}
body{
font-family: 'Microsoft Yahei',Tahoma,Helvetica,Arial,sans-serif;
}
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
$fontsize:64;
@function px2Rem($px){
@return $px / $fontsize + rem;
}
%webpage{
width:100%;
height:100%;
}
html,body{
@extend %webpage;
}
#swiper-container{
max-width:640px;
margin:0 auto;
position:relative;
z-index: 5;
overflow: hidden;
@extend %webpage;
& .music-t{
position:absolute;
width:px2Rem(44);
height:px2Rem(44);
right:px2Rem(40);
top:px2Rem(40);
background:url(../images/music.png) no-repeat;
background-size: cover;
z-index:20;
animation:cir 1s linear infinite;
}
& .music-g{
background:url(../images/music.gif) no-repeat;
background-size: cover;
width:px2Rem(70);
height:px2Rem(70);
position:absolute;
top:px2Rem(10);
right:px2Rem(10);
z-index:3;
}
& .iconfont{
position: absolute;
background-size: contain;
display:block;
top:50%;
right:10%;
width: px2Rem(36);
height: px2Rem(60);
z-index: 20;
animation: showRight 1s linear infinite;
}
}
@keyframes showRight {
from {
right:px2Rem(30);
opacity: 1;
}
to {
right:px2Rem(40);
opacity: 0;
}
}
.box-1{
@extend %webpage;
background: url("../images/bg12.jpg") no-repeat;
background-size: cover;
& h2{
font-size:px2Rem(80);
text-align:center;
padding-top:px2Rem(60);
}
& h3{
font-size:px2Rem(15);
text-align:center;
padding-top:px2Rem(40);
}
& span{
font-size:px2Rem(40);
position:absolute;
top:px2Rem(850);
left:px2Rem(140);
}
}
.box-1 p:nth-of-type(1){
position:absolute;
top:px2Rem(300);
left:px2Rem(160);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(320);
height:px2Rem(477);
}
}
.box-2{
background: url("../images/bg12.jpg") no-repeat;
background-size: cover;
z-index: 10;
& h2{
font-size:px2Rem(60);
text-align:center;
padding-top:px2Rem(150);
}
& span{
position:absolute;
top:px2Rem(700);
font-size:px2Rem(30);
text-indent: 3em;
}
}
.box-2 p:nth-of-type(1){
position:absolute;
top:px2Rem(200);
left:px2Rem(40);
background-size: cover;
z-index:15;
& img{
width:px2Rem(550);
height:px2Rem(515);
}
}
.box-3{
background: url("../images/bg3.jpg") no-repeat;
background-size: cover;
}
.box-3 p:nth-of-type(1){
color:#fff;
font-size:px2Rem(50);
box-sizing: border-box;
padding:0 0 px2Rem(10) px2Rem(100);
margin-top:px2Rem(250);
animation:cir 3s linear infinite;
}
.box-3 p:nth-of-type(2){
color:#fff;
font-size:px2Rem(50);
box-sizing: border-box;
padding-left:px2Rem(220);
transform-origin:center;
animation:cir 3s linear infinite;
}
.box-3 p:nth-of-type(3){
position:absolute;
top:px2Rem(400);
left:px2Rem(100);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(480);
height:px2Rem(424);
}
}
.box-3 p:nth-of-type(4){
position:absolute;
top:px2Rem(760);
color:#fff;
font-size:px2Rem(30);
text-indent: 2em;
}
.box-4{
background: url("../images/bg4.jpg") no-repeat;
background-size: cover;
}
.box-4 p:nth-of-type(1){
font-size:px2Rem(50);
color:#fff;
font-weight:bold;
box-sizing: border-box;
padding:px2Rem(180) 0 0 px2Rem(230);
}
.box-4 p:nth-of-type(2){
position:absolute;
top:px2Rem(200);
left:px2Rem(40);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(700);
height:px2Rem(656);
}
}
.box-4 p:nth-of-type(3){
font-size:px2Rem(30);
color:#fff;
text-indent: 2em;
position:absolute;
top:px2Rem(800);
left:px2Rem(30);
}
.box-5{
background: url("../images/bg5.jpg") no-repeat;
background-size: cover;
}
.box-5 p:nth-of-type(1){
position:absolute;
top:px2Rem(100);
left:px2Rem(-30);
background-size: cover;
z-index: 10;
& img{
width:px2Rem(700);
height:px2Rem(656);
}
}
.box-5 p:nth-of-type(2){
font-size:px2Rem(40);
color:#fff;
box-sizing: border-box;
padding:px2Rem(770) 0 0 px2Rem(150);
}
.box-5 p:nth-of-type(3){
font-size:px2Rem(30);
color:#fff;
box-sizing: border-box;
text-indent: 2em;
padding-left:px2Rem(20);
}
.box-6{
background: url("../images/bg6.jpg") no-repeat;
background-size: cover;
}
.box-6 p:nth-of-type(1){
background-size: cover;
z-index: 10;
& img{
width:px2Rem(500);
height:px2Rem(468);
}
}
.box-6 p:nth-of-type(2){
font-size:px2Rem(48);
color: #0d0d0d;
font-weight:bold;
box-sizing: border-box;
padding:px2Rem(20) 0 0 px2Rem(30);
}
.box-6 p:nth-of-type(3){
font-size:px2Rem(48);
color: #0d0d0d;
font-weight:bold;
text-indent: 5em;
box-sizing: border-box;
padding-top:px2Rem(30);
}
.box-6 p:nth-of-type(4){
font-size:px2Rem(30);
box-sizing: border-box;
padding:px2Rem(20) 0 0 px2Rem(20);
}
.box-7{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
}
.box-7 p:nth-of-type(1){
font-size:px2Rem(48);
font-weight:bold;
text-align:center;
box-sizing: border-box;
padding-top:px2Rem(150);
}
.box-7 p:nth-of-type(2){
font-size:px2Rem(40);
text-align:center;
box-sizing: border-box;
padding-top:px2Rem(20);
}
.box-7 p:nth-of-type(3){
font-size:px2Rem(40);
text-align:center;
box-sizing: border-box;
padding-top: px2Rem(30);
}
.box-7 p:nth-of-type(4){
background-size:cover;
z-index: 10;
position: absolute;
left:px2Rem(130);
bottom:px2Rem(30);
& img{
width:px2Rem(365);
height:px2Rem(500);
}
}
.box-8{
background: url("../images/bg4.jpg") no-repeat;
background-size: cover;
}
.box-8 p:nth-of-type(1){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(100);
left:px2Rem(170);
& img{
width:px2Rem(350);
height:px2Rem(480);
}
}
.box-8 p:nth-of-type(2){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(400);
left:px2Rem(160);
& img{
width:px2Rem(400);
height:px2Rem(400);
}
}
.box-8 p:nth-of-type(3){
font-size:px2Rem(35);
color:#fff;
text-indent: 2em;
box-sizing: border-box;
padding:px2Rem(750) 0 0 0;
}
.box-9 p:nth-of-type(1){
@extend %webpage;
background-size: cover;
position:relative;
top:0;
left:0;
animation:cir1 1s linear 2s;
& img{
width:px2Rem(1000);
height:px2Rem(960);
}
}
.box-9 p:nth-of-type(2){
background-size:cover;
z-index: 10;
position:absolute;
top:px2Rem(100);
left:px2Rem(50);
& img{
width:px2Rem(576);
height:px2Rem(480);
}
}
.box-9 p:nth-of-type(3){
font-size:px2Rem(40);
font-weight: bold;
color:#fff;
position:absolute;
top:px2Rem(580);
left:px2Rem(140);
}
.box-9 p:nth-of-type(4){
font-size:px2Rem(30);
color:#fff;
position:absolute;
top:px2Rem(700);
left:px2Rem(20);
text-indent: 2em;
}
.box-10{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
box-sizing: border-box;
padding-top:px2Rem(100);
& span{
font-size:px2Rem(48);
color: #cf0000;
font-weight:bold;
box-sizing: border-box;
padding:0 0 0 px2Rem(50);
}
& p{
font-size:px2Rem(24);
color:#424242;
box-sizing: border-box;
padding:px2Rem(12) 0 0 px2Rem(50);
}
& img{
width:px2Rem(480);
height:px2Rem(424);
position:absolute;
top:px2Rem(650);
left:px2Rem(100);
}
}
.box-10 p:nth-of-type(1){
box-sizing: border-box;
padding-top:px2Rem(40);
}
.box-11{
background: url("../images/bg7.jpg") no-repeat;
background-size: cover;
& .tip{
font-size:px2Rem(28);
color:#888;
box-sizing: border-box;
padding-top:px2Rem(8);
padding-left: px2Rem(50);
}
}
.box-11 p:nth-of-type(1){
font-size:px2Rem(32);
color: #595959;
box-sizing: border-box;
padding-top:px2Rem(20);
text-align:center;
}
.box-11 p:nth-of-type(2){
font-size:px2Rem(32);
color: #fff;
background:red;
line-height:px2Rem(70);
width:px2Rem(260);
height:px2Rem(70);
margin:px2Rem(60) 0 0 px2Rem(190);
text-align:center;
}
.box-11 p:nth-of-type(3){
box-sizing:border-box;
padding-top:px2Rem(60);
}
.box-11 p:nth-of-type(8){
position: absolute;
top:px2Rem(500);
left:px2Rem(160);
& img{
width:px2Rem(300);
height:px2Rem(301);
}
}
.box-11 p:nth-of-type(9){
position: absolute;
top:px2Rem(830);
left:px2Rem(170);
& img{
width:px2Rem(290);
height:px2Rem(60);
}
}
@keyframes cir {
50%{
transform:rotate(0deg)
}
0%{
transform:rotate(2deg)
}
100%{
transform:rotate(-4deg)
}
}
@keyframes cir1{
0%{
left:px2Rem(-10);
}
20%{
left:px2Rem(-40);
}
40%{
left:px2Rem(-20);
}
60%{
right:px2Rem(20);
}
80%{
right:px2Rem(20);
}
100%{
left:px2Rem(10);
}
}
