TE9手机微信场景

2023-11-12 11:07:34

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">&#xe600;</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"> &nbsp; &nbsp; &nbsp; 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"> 强劲四核&nbsp;畅想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);
  }
}

TE9手机微信场景

码农公寓

相关文章