Bläddra i källkod

动画的修改

outaozhen 3 år sedan
förälder
incheckning
db9df04779
3 ändrade filer med 34 tillägg och 27 borttagningar
  1. 18 11
      css/styles.css
  2. 8 8
      index.html
  3. 8 8
      js/global.js

+ 18 - 11
css/styles.css

@@ -98,6 +98,9 @@ body{
 	display:table;
 	text-align:center;
 }
+.btn-login{
+	background: rgba(47, 84, 235, 1);
+}
 .logoText{
 	padding-left: 10px;
 	font-weight: 500;
@@ -139,26 +142,27 @@ body{
 }
 .bannerTitle1{
 	color: rgba(47, 84, 235, 1);
-	transition: all 0.4s ease-in 0s;
-  transform: translateX(-400px);
+	/*transition: all 0.4s ease-in 0s;
+  transform: translateX(-400px);*/
 }
 .bannerTitle2{
 	color: rgba(0, 0, 0, 0.8);
-	transition: all 0.8s ease-in 0s;
-  transform: translateX(-600px);
+	/*transition: all 0.8s ease-in 0s;
+  transform: translateX(-600px);*/
 }
 .bannerTitle3{
 	color: rgba(0, 0, 0, 0.5);
 	font-size: 24px;
-	transition: all 1.2s ease-in 0s;
-  transform: translateX(-600px);
+	/*transition: all 1.2s ease-in 0s;
+  transform: translateX(-600px);*/
 }
 .btnHand{
 	font-size: 24px;
 	font-weight: 500;
 	padding: 16px 32px;
-	transition: all 1.6s ease-in 0s;
-  transform: translateX(-400px);
+	background: rgba(47, 84, 235, 1);
+	/*transition: all 1.6s ease-in 0s;
+  transform: translateX(-400px);*/
 }
 .moreBox{
 	position: absolute;
@@ -347,7 +351,7 @@ body{
 	width: 790px;
 	height: 560px;
 	background: url(img/image_cpgn_02_01.png) no-repeat;
-	box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);
+	/*box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);*/
 	transition-delay: 0.2s;
 	transform: translateX(200px);
 }
@@ -387,7 +391,10 @@ body{
 	box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
 	transition-delay: 0.8s;
 }
-.productOneR1{
+.productRT{
+	transition-delay: 0.4s;
+}
+/*.productOneR1{
   transition-delay: 0.4s;
 }
 .productOneR2{
@@ -404,7 +411,7 @@ body{
 }
 .productOneR6{
   transition-delay: 1.4s;
-}
+}*/
 .productRT{
 	position: absolute;
 	top: 120px;

+ 8 - 8
index.html

@@ -35,7 +35,7 @@
           <span class="table-cell logoText">大司空云计价</span>
         </div>
         <div class="buttonCon">
-          <span class="table-cell"><button type="button" class="btn btn-primary">登录平台</button></span>
+          <span class="table-cell"><button type="button" class="btn btn-primary btn-login">登录平台</button></span>
           <!-- <span class="table-cell btnText">登录平台</span> -->
           <!-- <span class="table-cell"><button type="button" class="btn btn-primary">注册帐号</button></span> -->
         </div>
@@ -140,40 +140,40 @@
               <div class="col-8">
                 <div class="productRight position-relative">
                   <div class="productRImg productOneRImg hiddenTranX2"></div>
-                  <div class="productRT">
+                  <div class="productRT hiddenTranX2">
                     <ul class="clearfix">
                       <li class="border-right border-bottom">
-                        <div class="productOneR1 hiddenTranX2">
+                        <div class="productOneR1">
                           <div class="productRLImg productOneRLImg1"></div>
                           <h4 class="mt-2">Apple</h4>
                         </div>
                       </li>
                       <li class="border-right border-bottom">
-                        <div class="productOneR2 hiddenTranX2">
+                        <div class="productOneR2">
                           <div class="productRLImg productOneRLImg2"></div>
                           <h4 class="mt-2">Windows</h4>
                         </div>
                       </li>
                       <li class="border-bottom">
-                        <div class="productOneR3 hiddenTranX2">
+                        <div class="productOneR3">
                           <div class="productRLImg productOneRLImg3"></div>
                           <h4 class="mt-2">Linux</h4>
                         </div>
                       </li>
                       <li class="border-right">
-                        <div class="productOneR4 hiddenTranX2">
+                        <div class="productOneR4">
                           <div class="productRLImg productOneRLImg4"></div>
                           <h4 class="mt-2">红旗Linux</h4>
                         </div>
                       </li>
                       <li class="border-right">
-                        <div class="productOneR5 hiddenTranX2">
+                        <div class="productOneR5">
                           <div class="productRLImg productOneRLImg5"></div>
                           <h4 class="mt-2">中标麒麟</h4>
                         </div>
                       </li>
                       <li class="">
-                        <div class="productOneR6 hiddenTranX2">
+                        <div class="productOneR6">
                           <div class="productRLImg productOneRLImg6"></div>
                           <h4 class="mt-2">统信uos</h4>
                         </div>

+ 8 - 8
js/global.js

@@ -2,19 +2,19 @@ $(function(){
 	$(".zhzdFir").click(function () {
 		$(this).toggleClass("now").siblings(".zhzdMenu").slideToggle("fast")
 	});
-	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
+	// $('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
 })
 $(window).scroll(function () {
   var fold = $(window).height() + $(window).scrollTop();
-  if (fold > $(".bannerBox").offset().top) {
-  	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
-  }else{
-  	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').removeClass('show');
-  }
+  // if (fold > $(".bannerBox").offset().top) {
+  // 	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').addClass('show');
+  // }else{
+  // 	$('.bannerTitle1,.bannerTitle2,.bannerTitle3,.btnHand').removeClass('show');
+  // }
   if (fold > $(".productOne").offset().top || $(window).scrollTop() < 2000) {
-  	$('.productOneImg,.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').addClass('show');
+  	$('.productOneImg,.productOneRImg,.productRT').addClass('show');
   }if($(window).scrollTop() > 2500 || fold < $(".productOne").offset().top){
-  	$('.productOneRImg,.productOneR1,.productOneR2,.productOneR3,.productOneR4,.productOneR5,.productOneR6').removeClass('show');
+  	$('.productOneImg,.productOneRImg,.productRT').removeClass('show');
   }
   if (fold > $(".productTwo").offset().top || $(window).scrollTop() < 3000) {
   	$('.productOneImg,.productTwoImg,.productTwoRImg1,.productTwoRImg2,.productTwoRImg3').addClass('show');