Merge pull request #5 from isaacpitwa/text-animations

isaacpitwa · web-flow · commit a3014a2dfdc7 · 2020-07-03T16:29:52.000+03:00
Text animations
diff --git a/applications/spacious/index.html b/applications/spacious/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spacious Animation</title>
+    <link rel="stylesheet" href="./styles.css"/>
+</head>
+<body>
+    <div class="main">
+        <span>S</span>
+        <span>P</span>
+        <span>A</span>
+        <span>C</span>
+        <span>I</span>
+        <span class="letter"></span>
+        <span>U</span>
+        <span>S</span>
+    </div>
+</body>
+</html>
diff --git a/applications/spacious/styles.css b/applications/spacious/styles.css
@@ -0,0 +1,47 @@
+*{
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+body{
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-family: 'Quicksand', sans-serif;
+	font-size: 42px;
+	background: #f7f7f7;
+}
+span{
+	margin: 0 15px;
+	line-height: .7;
+	text-shadow: 0 0 2px rgba(0, 0, 0, .45);
+	animation: span 3s ease-in infinite alternate;
+}
+.main{
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+}
+.letter{
+	display: inline-flex;
+	height: 30px;
+	width: 27px;
+	/* border: 2.5px solid #FF1EAD; */
+	border: 2.35px solid black;
+	border-radius: 14px;
+	box-shadow:
+		0 0 2px rgba(0, 0, 0, .75),
+		inset 0 0 2px rgba(0, 0, 0, .45);
+
+	animation: letter 3s ease-in-out infinite alternate;
+}
+@keyframes span {
+	0%,30%{ margin: 0 15px; }
+	70%,100%{ margin: 0 5px; }
+}
+@keyframes letter {
+	0%,30%{ width: 27px; }
+	70%,100%{ width: 30vw; }
+}
