您的位置: 首页  >  IT文章  >  TE9手机微信场景

TE9手机微信场景

分类: IT文章 • 2023-11-13 09:22:31

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 >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- 0.2px;
  -moz-osx-font-smoothing: grayscale;}
$fontsize:64;
@function px2Rem($px){
  @return $px / $fontsize + rem;
}
%webpage{
  100%;
  height:100%;
}
html,body{
  @extend %webpage;
}
#swiper-container{
  max-640px;
  margin:0 auto;
  position:relative;
  z-index: 5;
  overflow: hidden;
  @extend %webpage;
  & .music-t{
    position:absolute;
    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;
    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%;
     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{
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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{
    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);
  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{
    px2Rem(300);
    height:px2Rem(301);
  }
}
.box-11 p:nth-of-type(9){
  position: absolute;
  top:px2Rem(830);
  left:px2Rem(170);
  & img{
    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);
  }
}



相关推荐