背景视频

index.css

@@ -58,11 +58,25 @@ body{
     background-color:darkseagreen;
 }
 
+video{
+    margin: auto; 
+    position: absolute; 
+    z-index: -1; 
+    top:0;
+    left: 50%; 
+    transform: translateX(-50%); 
+    visibility: visible; 
+    opacity: 1; 
+    width: 100%; 
+    height: auto;
+}
+
 
 .titles{
     position:absolute;
-    top:10rem;
-    width:100rem;
+    top:6.5rem;
+    left:3.5rem;
+    /* width:100rem; */
     text-align: center;
 }
 
@@ -113,10 +127,12 @@ body{
     border-radius: 5px;
     width: 12.3rem;
     height: 2.91rem;
-    background: -o-linear-gradient(top,#D06814,#FFCDB2);
-    background: -webkit-gradient(linear,left top, left bottom,from(#D06814),to(#FFCDB2));
-    background: linear-gradient(180deg,#D06814,#FFCDB2);
+    /* background: -o-linear-gradient(top,#D06814,#FFCDB2);
+    background: -webkit-gradient(linear,left top, left bottom,from(#D06814),to(#FFCDB2));*/
+    background: linear-gradient(180deg,#D06814,transparent); 
+    /* background-color: #D06814; */
     border: solid 0px #D06814;
+    opacity: 0.8;
 }
 
 
@@ -126,10 +142,12 @@ body{
     text-align: center;
     color:#FFFFFF;
     font-weight: normal;
+
 }
 
 .text a{
-    color: inherit;
+    color: #FFFFFF;
+    opacity: 1;
 }
 .text a:link{
     text-decoration:none;

script/video.js

@@ -0,0 +1,13 @@
+let loopVideo = document.getElementById('loop');
+let sourceLoop = document.createElement('source');
+sourceLoop.setAttribute('src','./video/loop.mp4');
+sourceLoop.setAttribute('type','video/mp4');
+
+
+window.onload = function(){
+    setTimeout(()=>{
+        console.log('once');
+
+        loopVideo.appendChild(sourceLoop);
+    },12000)
+}