提交图片修改

components/floatup/floatup.css

@@ -5,13 +5,13 @@ body,html{
     overflow: hidden;
     overflow: hidden;
 }
 }
 .floatup_body{
 .floatup_body{
-    height:70%;
-    /* width:70%; */
-    margin: 0px auto;
     /* background: url(./img/bg1.png) no-repeat;
     /* background: url(./img/bg1.png) no-repeat;
     background-size:100% 100%; */
     background-size:100% 100%; */
-    position:relative;
-    top: 19%;
+    height: 70%;
+    width: 70%;
+    margin: 0px auto;
+    position: relative;
+    top: 21%;
 }
 }
 .floatup_body:before{
 .floatup_body:before{
     content:'';
     content:'';
@@ -20,8 +20,8 @@ body,html{
     left:0;
     left:0;
     width:100%;
     width:100%;
     height:100%;
     height:100%;
-    background: url(./img/bg1.png) no-repeat;
-    background-size:100% 100%;
+    background: url(./img/bg1.png) no-repeat 34% 50%;
+    background-size: 86%;
     animation: floatup_anibg 3s linear 0s infinite;
     animation: floatup_anibg 3s linear 0s infinite;
     -webkit-animation: floatup_anibg 3s linear 0s infinite;
     -webkit-animation: floatup_anibg 3s linear 0s infinite;
     -moz-animation:floatup_anibg 3s linear 0s infinite;
     -moz-animation:floatup_anibg 3s linear 0s infinite;
@@ -42,8 +42,8 @@ body,html{
     line-height:70px;
     line-height:70px;
 }
 }
 .floatup_1{
 .floatup_1{
-    top:25%;
-    left:30%;
+    top:15%;
+    left:15%;
     background: url(./img/icon1.png) no-repeat;
     background: url(./img/icon1.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation: floatup_ani1 3s linear 0s infinite;
     animation: floatup_ani1 3s linear 0s infinite;
@@ -51,8 +51,8 @@ body,html{
     -moz-animation:floatup_ani1 3s linear 0s infinite;
     -moz-animation:floatup_ani1 3s linear 0s infinite;
 }
 }
 .floatup_2{
 .floatup_2{
-    top:65%;
-    left:35%;
+    top:70%;
+    left:25%;
     background: url(./img/icon2.png) no-repeat;
     background: url(./img/icon2.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation:floatup_ani2 3s linear 0s infinite;
     animation:floatup_ani2 3s linear 0s infinite;
@@ -61,7 +61,7 @@ body,html{
 }
 }
 .floatup_3{
 .floatup_3{
     top:40%;
     top:40%;
-    left:40%;
+    left:38%;
     background: url(./img/icon3.png) no-repeat;
     background: url(./img/icon3.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation:floatup_ani3 3s linear 0s infinite;
     animation:floatup_ani3 3s linear 0s infinite;
@@ -70,7 +70,7 @@ body,html{
 }
 }
 .floatup_4{
 .floatup_4{
     top:40%;
     top:40%;
-    left:55%;
+    left:70%;
     background: url(./img/icon4.png) no-repeat;
     background: url(./img/icon4.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation:floatup_ani4 3s linear 0s infinite;
     animation:floatup_ani4 3s linear 0s infinite;
@@ -78,8 +78,8 @@ body,html{
     -moz-animation: floatup_ani4 3s linear 0s infinite;
     -moz-animation: floatup_ani4 3s linear 0s infinite;
 }
 }
 .floatup_5{
 .floatup_5{
-    top:57%;
-    left:50%;
+    top:63%;
+    left:60%;
     background: url(./img/icon5.png) no-repeat;
     background: url(./img/icon5.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation:floatup_ani5 3s linear 0s infinite;
     animation:floatup_ani5 3s linear 0s infinite;
@@ -88,7 +88,7 @@ body,html{
 }
 }
 .floatup_6{
 .floatup_6{
     top:25%;
     top:25%;
-    left:55%;
+    left:60%;
     background: url(./img/icon6.png) no-repeat;
     background: url(./img/icon6.png) no-repeat;
     background-size:100% 100%;
     background-size:100% 100%;
     animation:floatup_ani6 3s linear 0s infinite;
     animation:floatup_ani6 3s linear 0s infinite;
@@ -106,19 +106,19 @@ body,html{
     100%{opacity: 1}
     100%{opacity: 1}
 }
 }
 @keyframes floatup_ani1{
 @keyframes floatup_ani1{
-    from{opacity: 1;top:25%}
+    from{opacity: 1;top:15%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @-webkit-keyframes floatup_ani1{
 @-webkit-keyframes floatup_ani1{
-    from{opacity: 1;top:25%}
+    from{opacity: 1;top:15%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @keyframes floatup_ani2{
 @keyframes floatup_ani2{
-    from{opacity: 1;top:65%}
+    from{opacity: 1;top:70%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @-webkit-keyframes floatup_ani2{
 @-webkit-keyframes floatup_ani2{
-    from{opacity: 1;top:65%}
+    from{opacity: 1;top:70%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @keyframes floatup_ani3{
 @keyframes floatup_ani3{
@@ -138,11 +138,11 @@ body,html{
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @keyframes floatup_ani5{
 @keyframes floatup_ani5{
-    from{opacity: 1;top:57%}
+    from{opacity: 1;top:63%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @-webkit-keyframes floatup_ani5{
 @-webkit-keyframes floatup_ani5{
-    from{opacity: 1;top:57%}
+    from{opacity: 1;top:63%}
     to{opacity: 0;top:0%}
     to{opacity: 0;top:0%}
 }
 }
 @keyframes floatup_ani6{
 @keyframes floatup_ani6{

index.html

@@ -18,7 +18,7 @@
             overflow: hidden;
             overflow: hidden;
         }
         }
         body{
         body{
-            background: url(./assets/images/bg1.png) no-repeat center;
+            background: url(./assets/images/bg1.jpg) no-repeat center;
             background-size:100% 100%;
             background-size:100% 100%;
             width:100vw;
             width:100vw;
             height:100vh;
             height:100vh;