查看更多、官方正版的动画调整

home.html

@@ -56,8 +56,9 @@
         <div class="mt-4"><a href="/login" class="btn btn-primary btnHand">立即体验</a></div>
       </div>
       <div class="w-100 text-center moreBox">
-        <h4>查看更多</h4>
-        <div><i class="iconWidth iconMore"></i></div>
+        <div id="moreBox"></div>
+        <!-- <h4>查看更多</h4>
+        <div><i class="iconWidth iconMore"></i></div> -->
       </div>
     </div>
   </div>
@@ -77,44 +78,6 @@
         </div>
         <div class="videoRight ml-4">
           <div class="vjs-playlist playlist-container"></div>
-          <!-- <ul>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_01.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-调价</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_02.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-共用单价文件</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_03.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-清单精灵</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_04.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-查找定位</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_05.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-分享协作</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-            <li class="videoList">
-              <div class="row">
-                <div class="col-6"><div class="videoImg"><a href="#"><img src="home/images/image_video_cover_06.png"></a></div></div>
-                <div class="col-6"><div class=""><div class="videoTitle">视频教程-模板克隆</div><span class="textRrey">23:03</span></div></div>
-              </div>
-            </li>
-          </ul> -->
         </div>
       </div>
     </div>
@@ -139,6 +102,9 @@
                   <div class="productImg productOneImg hiddenTranX1 mt-3">
                     <div id="productOneImg"></div>
                   </div>
+                  <div class="productOneFree">
+                    <div id="productOneFree"></div>
+                  </div>
                 </div>
               </div>
               <div class="col-8">
@@ -518,6 +484,23 @@
       autoplay: true,
       path: 'https://assets3.lottiefiles.com/packages/lf20_e1rwkapo.json',
     });
+    var moreBox = document.getElementById('moreBox');
+    lottie.loadAnimation({
+      container: moreBox,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'https://assets2.lottiefiles.com/packages/lf20_nbjcmwmj.json',
+    });
+    var productOneFree = document.getElementById('productOneFree');
+    lottie.loadAnimation({
+      container: productOneFree,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      loop: false,
+      path: 'https://assets5.lottiefiles.com/packages/lf20_sov6gjfm.json',
+    });
     function topFunction() {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;

home/css/styles.css

@@ -198,7 +198,7 @@ body {
   transform: translateX(-400px);*/
 }
 .moreBox {
-	height: 83px;
+	/*height: 83px;*/
 }
 .moreBox h4 {
 	font-size: 14px;
@@ -209,6 +209,11 @@ body {
 	height: 54px;
 	background: url(img/css_sprites.png) no-repeat -80px -1078px;
 }
+#moreBox{
+	margin: 1rem auto 0 auto;
+	width: 2.4rem;
+	height: 4rem;
+}
 .slogan {
 	height: 320px;
 	text-align: center;
@@ -358,6 +363,15 @@ body {
 	/*background: url(img/css_sprites.png) no-repeat 0 0;*/
 	/*transition-delay: 0.2s;*/
 }
+.productOneFree{
+	position: absolute;
+	top: -45px;
+	right: -30px;
+}
+#productOneFree{
+	width: 260px;
+	height: 260px;
+}
 #productOneImg,
 #productTwoImg,
 #productThreeImg {