upd

Frank-Star-fn · Dec 17, 2024 · aab116d · aab116d
1 parent 4991a23
commit aab116d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,10 @@
 
 ## 参考项目
 
+文字下落、烟雾光圈和烟雾字幕参考[单单单UP-GSAP前端动画库](https://www.bilibili.com/video/BV1Br4y1j7BW)
+
 小时钟参考[高低肩真的难受-Canvas 入门教程](https://www.bilibili.com/video/BV1os4y1H7FB)
 
-变色字体和旋转加载参考[知行小课-15分钟学会css动画](https://www.bilibili.com/video/BV1AC4y1w7FH)
+图标动画参考[Python斗罗-制作svg动画原来如此简单](https://www.bilibili.com/video/BV1xf421B7KU)
 
-文字下落、烟雾光圈和烟雾字幕参考[单单单UP-GSAP前端动画库](https://www.bilibili.com/video/BV1Br4y1j7BW)
+变色字体和旋转加载参考[知行小课-15分钟学会css动画](https://www.bilibili.com/video/BV1AC4y1w7FH)
diff --git a/index.html b/index.html
@@ -13,20 +13,38 @@
   </div>
 
   <div class="main2 no-select">
-    <a href="./gsap/text-fall.html" class="button3">文字下落</a>
-    <a href="demo2.html" class="button">简单交互</a>
-    <a href="./clock/demo.html" class="button">小时钟</a>
-    <a href="./svg/demo.html" class="button">图标动画</a>
+    <div class="flex" style="padding-bottom: 15px;">
+      <a href="./gsap/text-fall.html" class="button3"><span class="relative">文字下落</span></a>
+      <a href="demo2.html" class="button"><span>简单交互</span></a>
+      <a href="./clock/demo.html" class="button">小时钟</a>
+      <a href="./svg/demo.html" class="button">图标动画</a>
+    </div>
+
+    <div class="flex">
+      <a href="demo4-heart.html" class="button2">心跳</a>
+      <a href="./circle/demo5.html" class="button2">旋转加载</a>
+      <a href="./gsap/smoke1.html" class="button2">烟雾光圈</a>
+      <a href="./gsap/smoke2.html" class="button2">烟雾字幕</a>
+    </div>
 
-    <a href="demo4-heart.html" class="button2">心跳</a>
-    <a href="./circle/demo5.html" class="button2">旋转加载</a>
-    <a href="./gsap/smoke1.html" class="button2">烟雾光圈</a>
-    <a href="./gsap/smoke2.html" class="button2">烟雾字幕</a>
   </div>
 
 </body>
 
 <style>
+.flex {
+  display: flex;
+}
+.relative {
+    position: relative;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  background-color: #f1f5f9;
+}
+
 .no-select {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none;    /* Firefox */
@@ -54,7 +72,7 @@
 
   font-size: 70px;
   font-weight: 600;
-  margin-top: 50px;
+  /* margin-top: 50px; */
   width: 100%;
   height: 110px;
   display: flex;
@@ -74,8 +92,10 @@
 .main2 {
   margin-top: 15px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  min-width: 380px;
 }
 .button {
   padding: 5px; 
@@ -87,7 +107,14 @@
   border-radius: 8px;
   color: rgb(146 64 14);
   transition: background-color 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+/* .button span {
+  display: inline-block; 
+} */
+
 .button:hover {
   background: rgb(245 158 11);
 }

diff --git a/svg/demo.html b/svg/demo.html
@@ -6,22 +6,33 @@
 	<title>Logo</title>
 </head>
 <body>
-	<div class="no-select">
+	<div class="no-select main">
 		<img src="电脑设置.svg">
 		<img src="手机设置.svg">
 		<img src="设置-办公－14.svg">
 		<img src="设置 (1).svg">
 		<img src="设置.svg">
 
+		<img class="two-col" src="ship.svg">
+		<img src="star copy.svg">
+
 		<img src="bili.svg">
 		<img src="github.svg">
-
-		<img src="ship.svg">
-		<img src="star copy.svg">
 	</div>
 </body>
 
 <style>
+.two-col {
+	grid-column: 1 / span 2;
+}
+
+.main {
+	display: grid;
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	gap: 10px;
+	place-items: center;
+	min-width: 500px;
+}
 .no-select {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none;    /* Firefox */

diff --git a/svg/1.svg → svg/setting.svg b/svg/1.svg → svg/setting.svg