Update main_cssstyle.css

css/main_cssstyle.css

@@ -5,8 +5,236 @@
     font-family: "Merriweather";
 }
 
-*,
-p,
+* {
+    margin: 0;
+    padding: 0;
+}
+
+/* Animation */
+
+.shijianzhou {
+
+    text-align: center;
+    color: #fff;
+
+}
+
+.timezone {
+    width: 6px;
+    height: 800px;
+    background: lightblue;
+    margin: 0 auto;
+    margin-top: 50px;
+    border-radius: 3px;
+    position: relative;
+    -webkit-animation: heightSlide 2s linear;
+}
+
+/*加入竖线，宽度为6px*/
+@-webkit-keyframes heightSlide {
+    0% {
+        height: 0;
+    }
+
+    100% {
+        height: 800px;
+    }
+}
+
+/*增加动画*/
+.timezone:after {
+    content: '待续';
+    width: 100px;
+    color: #fff;
+    position: absolute;
+    margin-left: 0px auto;
+    bottom: 0px;
+    -webkit-animation: showIn 4s ease;
+}
+
+/*通过添加伪元素，来输入结尾*/
+.timezone .time,
+.timezone .timeleft {
+    position: absolute;
+    margin-left: -10px;
+    margin-top: -10px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 4px solid rgba(255, 255, 255);
+    background: lightblue;
+    -webkit-transition: all 0.5s;
+    -webkit-animation: showIn ease;
+}
+
+/*添加实心圆*/
+.timezone .time:nth-child(1) {
+    -webkit-animation-duration: 1s;
+}
+
+.timezone .timeleft:nth-child(2) {
+    -webkit-animation-duration: 1.5s;
+}
+
+.timezone .time:nth-child(3) {
+    -webkit-animation-duration: 2s;
+}
+
+.timezone .timeleft:nth-child(4) {
+    -webkit-animation-duration: 2.5s;
+}
+
+/*添加动画*/
+@-webkit-keyframes showIn {
+
+    0%,
+    70% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+
+
+
+/*设置动画效果*/
+.timezone .time h2,
+.timezone .timeleft h2 {
+    position: absolute;
+    margin-left: -120px;
+    margin-top: 3px;
+    color: #eee;
+    font-size: 14px;
+    cursor: pointer;
+    -webkit-animation: showIn 3s ease;
+}
+
+
+
+.timezone .timeleft h2 {
+    margin-left: 60px;
+    width: 100px;
+}
+
+.timezone .time:hover,
+.timezone .timeleft:hover {
+    border: 4px solid lightblue;
+    background: lemonchiffon;
+    box-shadow: 0 0 2px 2px rgba(255, 255, 255);
+}
+
+/*点击后圆球变色*/
+.timezone .time div,
+.timezone .timeleft div {
+    position: absolute;
+    top: 50%;
+    margin-top: -25px;
+    left: 50px;
+    width: 300px;
+    height: 50px;
+    background: lightblue;
+    border: 3px solid #eee;
+    border-radius: 10px;
+    z-index: 2;
+    overflow: hidden;
+    cursor: pointer;
+    -webkit-animation: showIn 3s ease;
+    -webkit-transition: all 0.5s;
+}
+
+/*添加方框*/
+.timezone .timeleft div {
+    left: -337px;
+}
+
+/*设置左右位置*/
+.timezone .time div:hover,
+.timezone .timeleft div:hover {
+    height: 170px;
+}
+
+/*点击后显示内容*/
+.timezone .time:before,
+.timezone .timeleft:before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    left: 32px;
+    width: 0px;
+    height: 0px;
+    border: 10px solid transparent;
+    border-right: 10px solid #eee;
+    z-index: -1;
+    -webkit-animation: showIn 3s ease;
+}
+
+.timezone .timeleft:before {
+    left: -33px;
+    border: 10px solid transparent;
+    border-left: 10px solid #eee;
+}
+
+/*设置div边框内容，就是那个尖*/
+.parallax>use {
+    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+}
+
+.parallax>use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+}
+
+.parallax>use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+}
+
+.parallax>use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+}
+
+.parallax>use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+}
+
+@keyframes move-forever {
+    0% {
+        transform: translate3d(-90px, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(85px, 0, 0);
+    }
+}
+
+.waves {
+    width: 100%;
+    height: 200px;
+    min-height: 200px;
+    position: relative;
+    margin-bottom: -15px;
+    bottom: 0;
+    left: 0;
+}
+
+.c-footer {
+    position: relative;
+}
+
+.content {
+    height: 30vh;
+}
+
+h1 {
+    font-size: 24px;
+}
+
+</style>p,
 h1,
 h2,
 h3,
@@ -38,17 +266,19 @@ ul {
 }
 
 body {
-    background-color: #fff;
+    background-color: #63cabc;
+    background: linear-gradient(to bottom, rgb(237, 195, 195), rgb(249, 80, 80));
+    /* background-image: url(../images/pi.jpg); */
+    background-size: contain;
+    background-attachment: fixed;
     font-family: "Merriweather";
     font-size: 1em;
     font-weight: normal;
-    background-size: 1200px;
+    background-size: 1500px;
+
     /* 正文字体 */
 }
 
-h1 {
-    border-bottom: none;
-}
 
 
 h1,
@@ -150,7 +380,7 @@ h2 {
 
 .home-content {
     display: flex;
-    flex-direction: row;
+    /* flex-direction: row; */
     align-items: center;
     overflow: hidden;
     margin: 3% 0;
@@ -383,6 +613,14 @@ input:checked+.switch-slider:before {
     height: 100%;
 }
 
+.videoContent {
+    background-color: rgb(40, 46, 83);
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+}
+
+
 
 .arrow-down {
     position: absolute;