Update index.html

yycforever · Oct 4, 2022 · 3ec7754 · 3ec7754
1 parent b0d53c1
commit 3ec7754
Showing 1 changed file with 89 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,12 +2,97 @@
 <html>
 
 <head>
-  <link rel="shortcut icon" href="/yyc48x48.ico">
+	<link rel="shortcut icon" href="/yyc48x48.ico">
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		@keyframes broders {
+			from {border-right-color: rgb(37, 89, 185,1);}
+			to {border-right-color: rgba(0, 0, 0, 0);}
+		}
+		@keyframes widths {
+			from {width: 0;}
+			to {width: 11ch;}
+		}
+		@keyframes widths1 {
+			from {width: 0;}
+			to {width: 450px;}
+		}
+		@keyframes move1{
+			from{top:-50%;}
+			to{top:20%;}
+		}
+		body{
+			background-image: url("https://th.bing.com/th/id/R.8bd6ea8aa923f79426f98942246013d1?rik=z3kYppPfT80M3w&pid=ImgRaw&r=0");
+			background-repeat: no-repeat;
+			background-size: cover;
+			background-position: center;
+			float: left;
+            width: 100%;
+
+			display: flex;
+			flex-direction: column;
+			height: 100vh;
+			text-align: center;
+		}
+		.words{
+			font-family: fira code,consolas,monaco,monospace;
+			color: rgb(0, 44, 138);/*字体颜色*/
+			font-size: 90px;
+			text-align: center;
+			justify-content: center;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+		.box p:nth-child(1){
+			border-right: 2px solid rgba(0, 0, 0, 0);
+			animation: broders 0.7s 5 normal 3s both,widths 2s steps(11) 3s both;
+		}
+		.box p:nth-child(2){
+			border-right: 2px solid rgba(0, 0, 0, 0);
+			animation: widths1 2s steps(5) 6.5s both, broders 0.7s 10 normal 3.7s both;
+		}
+		.box{
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+
+			animation: move1 2.5s;
+			overflow: hidden;
+			position: absolute;
+			background-color: rgb(255,255,255,0.7);
+			/* border-radius: 20px; */
+			top: 20%;
+			width: 100%;
+			height: 50%;
+		}
+		.box:hover{
+			background-image: url("https://www.ndmiao.cn/usr/themes/handsome/assets/img/snow.gif");
+			background-position: center;
+		}
+		.pulldown{
+			height: 32px;
+			width: 32px;
+			background-image: url("https://img.icons8.com/external-tanah-basah-basic-outline-tanah-basah/24/000000/external-chevron-arrows-tanah-basah-basic-outline-tanah-basah-3.png");
+			background-repeat: no-repeat;
+			background-position: center;
+			z-index: 100;
+			position: absolute;
+
+		}
+	</style>
 </head>
 
 <body>
-  <p>My Dear yyc 生日快乐！</p>
+	<div class="box">
+		<p class="words ch1">My Dear yyc</p>
+		<p class="words ch2"> 生日快乐！</p>
+	</div>
+	<div class="pulldown"></div>
 </body>
-
-</html>
 
+</html>