text rotate

ethanyyou · Jan 19, 2023 · 4b44d05 · 4b44d05
1 parent 1cef6e3
commit 4b44d05
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 1 deletion.
diff --git a/art/text-rotate/index.html b/art/text-rotate/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="stylesheet" href="style.css" />
+    <title></title>
+  </head>
+  <body>
+    <div id="tt">Yixuan Yu's CSS Hub!</div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/art/text-rotate/main.js b/art/text-rotate/main.js
@@ -0,0 +1,30 @@
+function getRandomColorValue() {
+  const arr = [5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function getColor() {
+  return (
+    '#' +
+    Array(6)
+      .fill(null)
+      .map((_) => getRandomColorValue())
+      .join('')
+  );
+}
+
+// console.log(getColor());
+const tag = document.querySelector('#tt');
+const text = tag.innerHTML;
+tag.innerHTML = '';
+
+console.log(text);
+
+text.split('').forEach((str, idx) => {
+  console.log(str);
+  if (str === ' ') {
+    tag.innerHTML += `<div>&nbsp;</div>`;
+  } else {
+    tag.innerHTML += `<div style="color:${getColor()}; animation-delay:${idx * 0.1}s">${str}</div>`;
+  }
+});
diff --git a/art/text-rotate/readme.md b/art/text-rotate/readme.md
@@ -0,0 +1,2 @@
+# Colorful text rotation
+<img src="text-rotate.gif" width="300px">
diff --git a/art/text-rotate/style.css b/art/text-rotate/style.css
@@ -0,0 +1,26 @@
+#tt {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-top: 400px;
+}
+
+#tt:hover div {
+  cursor: pointer;
+  animation: rotate 0.5s;
+}
+
+@keyframes rotate {
+  50% {
+    opacity: 0;
+    transform: rotateZ(7200deg) scale(10);
+  }
+
+  to {
+    transform: rotateZ(0deg) scale(1);
+  }
+}
diff --git a/art/text-rotate/text-rotate.gif b/art/text-rotate/text-rotate.gif
diff --git a/include.js b/include.js
@@ -37,6 +37,14 @@ let cards = [
     author: 'Source Code',
     githubLink: 'https://github.com/easianyu/css-hub/tree/master/art/water-drop',
   },
+
+  {
+    artName: 'Colorful Text Rotation',
+    pageLink: './art/text-rotate/index.html',
+    imageLink: './art/text-rotate/text-rotate.gif',
+    author: 'Source Code',
+    githubLink: 'https://github.com/easianyu/css-hub/tree/master/art/water-drop',
+  },
 ];
 
 // +--------------------------------------------------------------------------------+

diff --git a/style.css b/style.css
@@ -188,4 +188,4 @@ h2 {
   .author a {
     font-size: 1.6vw;
   }
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Colorful text rotation
		<img src="text-rotate.gif" width="300px">
-Original file line number
+Diff line change
@@ Expand Up / @@ -188,4 +188,4 @@ h2 { @@
       .author a {
         font-size: 1.6vw;
       }
-    }
+    }