优化顶部加载动画

weipxiu · Nov 24, 2020 · e7c65f2 · e7c65f2
1 parent 8b66dab
commit e7c65f2
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 8 deletions.
diff --git a/Art_Blog.zip b/Art_Blog.zip
diff --git a/dist/Art_Blog/common.php b/dist/Art_Blog/common.php
@@ -34,7 +34,7 @@
 		&& (navigator.userAgent.indexOf('Opera') < 0)){
 		window.location.href="echo esc_url(get_template_directory_uri()); /reminder.php";//判断IE5-10
 	 }*/
-		if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
+	if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
 		window.location.href="<?php echo esc_url(get_template_directory_uri()); ?>/reminder";/*判断<IE9,此方法也可以判断<IE10*/
 	}
 </script>

diff --git a/dist/Art_Blog/css/style_min.css b/dist/Art_Blog/css/style_min.css
diff --git a/dist/Art_Blog/index.php b/dist/Art_Blog/index.php
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-<meta name='generator' content='WordPress/Art_Blog v2020-11-24 10:19:23'>
+<meta name='generator' content='WordPress/Art_Blog v2020-11-24 13:50:39'>
 <title><?php $name = wp_title( '-', true, 'right' );
 		if ($name) {
 			echo $name . "&nbsp;-&nbsp;" . get_bloginfo('description');

diff --git a/dist/Art_Blog/js/main_min.js b/dist/Art_Blog/js/main_min.js
diff --git a/src/common.php b/src/common.php
@@ -34,7 +34,7 @@
 		&& (navigator.userAgent.indexOf('Opera') < 0)){
 		window.location.href="echo esc_url(get_template_directory_uri()); /reminder.php";//判断IE5-10
 	 }*/
-		if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
+	if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
 		window.location.href="<?php echo esc_url(get_template_directory_uri()); ?>/reminder";/*判断<IE9,此方法也可以判断<IE10*/
 	}
 </script>

diff --git a/src/css/style-pc.css b/src/css/style-pc.css
@@ -416,11 +416,33 @@
 		-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);
 		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);
 	}
+
+	@keyframes speed_bar_animation {
+		0% {
+			width: 0%;
+		}
+
+		100% {
+			width: 80%;
+		}
+	}
+	@keyframes speed_bar_animation_complete {
+		0% {
+			width: 80%;
+		}
+
+		100% {
+			width: 100%;
+		}
+	}
+
 	header .speed_bar{
 		width:0%;
 		height:2px;
 		background:url(../images/header_bj.gif); 
 		overflow: hidden;
+		animation: speed_bar_animation 2s ease-in;
+		animation-fill-mode: forwards;
 	}
 
 	header.hover .header {

diff --git a/src/index.php b/src/index.php
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-<meta name='generator' content='WordPress/Art_Blog v2020-11-24 10:19:23'>
+<meta name='generator' content='WordPress/Art_Blog v2020-11-24 13:50:39'>
 <title><?php $name = wp_title( '-', true, 'right' );
 		if ($name) {
 			echo $name . "&nbsp;-&nbsp;" . get_bloginfo('description');

diff --git a/src/js/main.js b/src/js/main.js
@@ -750,11 +750,11 @@
         // PC端执行函数
         pcFnAll: function () {
             // 顶部加载进度条
-            $("header .speed_bar").css({'width':'80%','transition':'width 2s'})
             window.onload = function(){
-                $("header .speed_bar").css({'width':'100%','transition':'width 0.5s'})
+                $("header .speed_bar").css({'animation':'speed_bar_animation_complete .5s ease-out','animation-fill-mode':'forwards'})
             }
 
+            // 登录注册悬浮入口
             $(".login_alert_close").click(() => {
                 $(".login_alert").slideUp();
             })