@@ -24,6 +24,7 @@
+ 
I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable.
diff --git a/style.css b/style.css
index 4795875..ec9ceed 100755
--- a/style.css
+++ b/style.css
@@ -1,12 +1,10 @@
-/*-----------------------------------------------------------------------------------*/
-/* GENERAL STYLING
-/*-----------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
-
-*, *::before, *::after {
- padding: 0;
- margin: 0 auto;
- box-sizing: border-box;
+*,
+*::before,
+*::after {
+ padding: 0;
+ margin: 0 auto;
+ box-sizing: border-box;
}
body {
@@ -19,7 +17,7 @@ body {
.content {
width: 95%;
max-width: 40ch;
- padding: 3em 1em;
+ padding: 0em 0em;
}
.marquee {
@@ -30,74 +28,116 @@ body {
display: grid;
place-items: center;
overflow: hidden;
-
- &_text {
- position: absolute;
- min-width: 100%;
- white-space: nowrap;
- animation: marquee 16s infinite linear;
-
- @keyframes marquee {
- from { translate: 70%; }
- to { translate: -70%; }
- }
+}
+.marquee_text {
+ position: absolute;
+ min-width: 100%;
+ white-space: nowrap;
+ -webkit-animation: marquee 16s infinite linear;
+ animation: marquee 16s infinite linear;
+}
+@-webkit-keyframes marquee {
+ from {
+ translate: 70%;
}
-
- &_blur {
- position: absolute;
- inset: 0;
- display: grid;
- place-items: center;
- background-color: black;
- background-image:
- linear-gradient(to right, white, 1rem, transparent 50%),
- linear-gradient(to left, white, 1rem, transparent 50%);
- filter: contrast(15);
-
- p {
- filter: blur(0.07em);
- }
+ to {
+ translate: -70%;
}
-
- &_clear {
- position: absolute;
- inset: 0;
- display: grid;
- place-items: center;
+}
+@keyframes marquee {
+ from {
+ translate: 70%;
}
+ to {
+ translate: -70%;
+ }
+}
+.marquee_blur {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ background-color: black;
+ background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%);
+ filter: contrast(15);
+}
+.marquee_blur p {
+ filter: blur(0.07em);
+}
+.marquee_clear {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
}
.text {
margin-block: 2em;
}
+/* -- paprsky -- */
+@keyframes rotate {
+ to {
+ transform: rotate(1turn);
+ }
+}
+.light-rays {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(#fff, black);
+ overflow: hidden;
+ --a: rgba(3, 10, 0, 0.1);
+ --b: rgba(3, 10, 0, 1);
+ --c: rgba(3, 10, 0, 0.5);
+ --d: rgba(3, 10, 0, 0.68);
+}
+.light-rays:before,
+.light-rays:after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -100vmax;
+ width: 200vmax;
+ height: 200vmax;
+ opacity: 0.5;
+}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+div:before {
+ background: conic-gradient(
+ var(--a),
+ var(--b),
+ var(--c),
+ var(--d),
+ var(--a),
+ var(--d),
+ var(--a),
+ var(--d),
+ var(--b),
+ var(--c),
+ var(--d),
+ var(--a),
+ var(--b)
+ );
+ animation: rotate 4s infinite;
+}
+div:after {
+ background: conic-gradient(
+ var(--c),
+ transparent,
+ var(--c),
+ var(--a),
+ transparent,
+ var(--b),
+ var(--c),
+ transparent,
+ var(--c),
+ var(--a)
+ );
+ animation: rotate 2s 4s infinite reverse;
+}