添加动画

css/comm.css

@@ -53,6 +53,7 @@ body {
 .header_root.bg_white {
   color: #333;
   background-color: #fff;
+  box-shadow: 0 0 1rem 0.4rem rgba(0, 0, 0, 0.082);
 }
 .header_root:hover {
   color: #333;
@@ -89,4 +90,52 @@ body {
 .header_stitle {
   padding-top: 0.3rem;
   font-size: 0.16rem;
+}
+/* 动画 */
+/* 向下移动30像素 */
+.translateY_30 {
+  -webkit-transform: translateY(30px);
+  -ms-transform: translateY(30px);
+  transform: translateY(30px);
+  -webkit-transition: opacity 1s, -webkit-transform 1s;
+  transition: opacity 1s, -webkit-transform 1s;
+  -o-transition: transform 1s, opacity 1s;
+  transition: transform 1s, opacity 1s;
+  transition: transform 1s, opacity 1s, -webkit-transform 1s;
+  opacity: 0;
+  -webkit-transition-delay: 0.5s;
+  -o-transition-delay: 0.5s;
+  transition-delay: 0.5s;
+}
+/* 旋转图片 */
+@-webkit-keyframes Rotimg {
+  0% {
+      transform: rotateY(0deg);
+  }
+
+  to {
+      transform: rotateY(360deg)
+  }
+}
+
+@keyframes Rotimg {
+  0% {
+      transform: rotateY(0deg);
+  }
+
+  to {
+      transform: rotateY(360deg)
+  }
+}
+
+.rotate_img {
+  -webkit-animation: Rotimg 2s linear;
+  animation: Rotimg 2s linear;
+}
+/* 还原 */
+.original_point {
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+  opacity: 1;
 }

index.html

@@ -69,43 +69,43 @@
       </div>
     </div>
     <div class="home_main">
-      <div class="home_superiority_title">我们的优势</div>
+      <div class="home_superiority_title translateY_30">我们的优势</div>
       <div class="home_superiority_info">
-        <div class="superiority_item">
+        <div class="superiority_item translateY_30">
           <img
-            class="superiority_item_img"
+            class="superiority_item_img original_img"
             src="./img/home/superiority/datong.png"
           />
-          <div class="superiority_item_title">打通教育全流程</div>
-          <div class="superiority_item_stitle">
+          <div class="superiority_item_title translateY_30">打通教育全流程</div>
+          <div class="superiority_item_stitle translateY_30">
             为K12全流程、全方位<br />提供智能服务
           </div>
         </div>
-        <div class="superiority_item">
+        <div class="superiority_item translateY_30">
           <img
-            class="superiority_item_img"
+            class="superiority_item_img original_img"
             src="./img/home/superiority/zhuanzhu.png"
           />
-          <div class="superiority_item_title">专注K12智慧教育</div>
-          <div class="superiority_item_stitle">
+          <div class="superiority_item_title translateY_30">专注K12智慧教育</div>
+          <div class="superiority_item_stitle translateY_30">
             为教育行业提供全方位<br />实时音频解决方案
           </div>
         </div>
-        <div class="superiority_item">
+        <div class="superiority_item translateY_30">
           <img
-            class="superiority_item_img"
+            class="superiority_item_img original_img"
             src="./img/home/superiority/shuju.png"
           />
-          <div class="superiority_item_title">数据安全及稳定性</div>
-          <div class="superiority_item_stitle">数据安全及稳定性有保障</div>
+          <div class="superiority_item_title translateY_30">数据安全及稳定性</div>
+          <div class="superiority_item_stitle translateY_30">数据安全及稳定性有保障</div>
         </div>
-        <div class="superiority_item">
+        <div class="superiority_item translateY_30">
           <img
-            class="superiority_item_img"
+            class="superiority_item_img original_img"
             src="./img/home/superiority/fuwu.png"
           />
-          <div class="superiority_item_title">服务保障</div>
-          <div class="superiority_item_stitle">全流程、全方位服务保障</div>
+          <div class="superiority_item_title translateY_30">服务保障</div>
+          <div class="superiority_item_stitle translateY_30">全流程、全方位服务保障</div>
         </div>
       </div>
       <div class="home_scheme_info">
@@ -172,32 +172,32 @@
     </div>
     <div class="home_serve">
       <div class="home_serve_main">
-        <div class="home_serve_title">
+        <div class="home_serve_title translateY_30">
           多项服务保障<br />让学校、老师、学生无忧
         </div>
         <div class="home_serve_item_box">
-          <div class="home_serve_item">
+          <div class="home_serve_item translateY_30">
             <img src="./img/home/serve/hailiangshujuziyuan.png" />
             <div class="home_serve_item_title">海量数据资源</div>
             <div class="home_serve_item_stitle">
               优质海量资源，教师不需要重新收集整理
             </div>
           </div>
-          <div class="home_serve_item">
+          <div class="home_serve_item translateY_30">
             <img src="./img/home/serve/jingzhunhuaxiang.png" />
             <div class="home_serve_item_title">精准画像</div>
             <div class="home_serve_item_stitle">
               全程采集教学数据，深度挖掘开发精准画像，指导师生发展
             </div>
           </div>
-          <div class="home_serve_item">
+          <div class="home_serve_item translateY_30">
             <img src="./img/home/serve/jiaoxueshujufenxi.png" />
             <div class="home_serve_item_title">教学数据分析</div>
             <div class="home_serve_item_stitle">
               薄弱知识点，归纳错因，体现能力变化曲线，帮助学生针对性训练
             </div>
           </div>
-          <div class="home_serve_item">
+          <div class="home_serve_item translateY_30">
             <img src="./img/home/serve/zhihuipiyuejishu.png" />
             <div class="home_serve_item_title">智慧批阅技术</div>
             <div class="home_serve_item_stitle">
@@ -212,5 +212,6 @@
     <script src="./librarys/swiper@3.4.2/swiper.jquery.min.js"></script>
     <script src="../js/header.js"></script>
     <script src="./js/index.js"></script>
+    <script src="./js/transform.js"></script>
   </body>
 </html>

js/transform.js

@@ -0,0 +1,6 @@
+$(function () {
+  setTimeout(function() {
+    $(".translateY_30").addClass("original_point");
+    $(".original_img").addClass("rotate_img");
+  }, 500);
+});