From a08b6076eaef14a09c25442e3a09ec1cab226744 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Thu, 19 May 2022 18:01:37 +0200 Subject: [PATCH 01/21] rainy-cloud-animation --- index.html | 37 +++++++++++++++++++++++++++++++++++++ style.css | 14 ++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b74673f --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + CSS Rainy Cloud Animation + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..4244ef5 --- /dev/null +++ b/style.css @@ -0,0 +1,14 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #1a242a; +} From f9a7558dcd99450da63ce71f6962098fd3fe470f Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Thu, 19 May 2022 18:01:58 +0200 Subject: [PATCH 02/21] rainy-cloud-animation --- style.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 4244ef5..822dd56 100644 --- a/style.css +++ b/style.css @@ -10,5 +10,64 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: #1a242a; + background: #181c1f; +} + +.container { + position: relative; + height: 400px; + border-bottom: 2 solid #fff; +} + +.cloud { + position: relative; + top: 50px; + width: 320px; + height: 100px; + background: #fff; + border-radius: 100px; +} + +.cloud::before { + content: ''; + position: absolute; + top: -50px; + left: 40px; + width: 110px; + height: 110px; + background: #fff; + border-radius: 50%; + box-shadow: 90px 0 0 30px #fff; +} + +.rain { + position: relative; + display: flex; + z-index: 1; + padding: 0 20px; +} + +.rain span { + position: relative; + bottom: 10px; + width: 10px; + height: 10px; + background: #fff; + margin: 0 2px; + border-radius: 50%; + animation: animate 5s linear infinite; + animation-duration: calc(15s / var(--i)); + transform-origin: bottom; +} + +@keyframes animate { + 0% { + transform: translateY(0) scale(1); + } + 70% { + transform: translateY(298px) scale(1); + } + 100% { + transform: translateY(298px) scale(0); + } } From 783b1294ceb11cdc7596d462681919294b2a6496 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 09:25:12 +0200 Subject: [PATCH 03/21] ambient-light-effect --- index.html | 32 +++++------------- style.css | 98 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 59 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index b74673f..db1a5a9 100644 --- a/index.html +++ b/index.html @@ -4,33 +4,17 @@ - CSS Rainy Cloud Animation + Ambient Light Effect -
-
-
- - - - - - - - - - - - - - - - - - - - +
+
+
+ + + +
diff --git a/style.css b/style.css index 822dd56..e03246f 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,6 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Poppins', sans-serif; } body { @@ -10,64 +9,69 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: #181c1f; + background: #050505; } -.container { +.cube { position: relative; - height: 400px; - border-bottom: 2 solid #fff; + width: 300px; + height: 300px; + transform-style: preserve-3d; + transform: rotateX(-30deg); + animation: animate 4s linear infinite; } -.cloud { - position: relative; - top: 50px; - width: 320px; - height: 100px; - background: #fff; - border-radius: 100px; +@keyframes animate { + 0% { + transform: rotateX(-30deg) rotateY(0deg); + } + 100% { + transform: rotateX(-30deg) rotateY(360deg); + } } -.cloud::before { - content: ''; +.cube div { position: absolute; - top: -50px; - left: 40px; - width: 110px; - height: 110px; - background: #fff; - border-radius: 50%; - box-shadow: 90px 0 0 30px #fff; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; } -.rain { - position: relative; - display: flex; - z-index: 1; - padding: 0 20px; +.cube div span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#151515, #00ec00); + transform: rotateY(calc(90deg * var(--i))) translateZ(150px); /* 300 / 2 = 150 */ } -.rain span { - position: relative; - bottom: 10px; - width: 10px; - height: 10px; - background: #fff; - margin: 0 2px; - border-radius: 50%; - animation: animate 5s linear infinite; - animation-duration: calc(15s / var(--i)); - transform-origin: bottom; +.top { + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #222; + transform: rotateX(90deg) translateZ(150px); } -@keyframes animate { - 0% { - transform: translateY(0) scale(1); - } - 70% { - transform: translateY(298px) scale(1); - } - 100% { - transform: translateY(298px) scale(0); - } +.top::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #0f0; + transform: translateZ(-380px); + filter: blur(20px); + box-shadow: 0 0 120px rgba(0, 255, 0, 0.2), + 0 0 200px rgba(0, 255, 0, 0.4), + 0 0 300px rgba(0, 255, 0, 0.6), + 0 0 400px rgba(0, 255, 0, 0.8), + 0 0 500px rgba(0, 255, 0, 1); } From 9086ac999833514a2e64c9a77d76110ddfeba8a0 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti <80033304+filippoerbisti@users.noreply.github.com> Date: Fri, 20 May 2022 09:27:50 +0200 Subject: [PATCH 04/21] Update README.md --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 987dc62..eb8429b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -# Some cool CSS effects +# Ambient Light Effect -Check my branches and have fun! - -View [DEMOS](https://codepen.io/filippoerbisti) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/XWZgKpv) on Codepen. From 7cb656a78a550da113d2083e651afe305d2405c8 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 09:49:27 +0200 Subject: [PATCH 05/21] neon-light-button-animation-hover --- index.html | 18 ++++---- style.css | 118 ++++++++++++++++++++++++++++++----------------------- 2 files changed, 75 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index db1a5a9..23150cf 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,16 @@ - Ambient Light Effect + Neon Light Button Animation Effects on Hover -
-
-
- - - - -
-
+ + + + + + Neon Button + \ No newline at end of file diff --git a/style.css b/style.css index e03246f..bd2a654 100644 --- a/style.css +++ b/style.css @@ -1,77 +1,93 @@ -* { +body { margin: 0; padding: 0; - box-sizing: border-box; -} - -body { display: flex; justify-content: center; align-items: center; min-height: 100vh; - background: #050505; + background: #031321; + font-family: consolas; } -.cube { +a { position: relative; - width: 300px; - height: 300px; - transform-style: preserve-3d; - transform: rotateX(-30deg); - animation: animate 4s linear infinite; + display: inline-block; + padding: 15px 30px; + color: #2196f3; + text-transform: uppercase; + letter-spacing: 4px; + text-decoration: none; + font-size: 24px; + overflow: hidden; + transition: 0.2s; } -@keyframes animate { - 0% { - transform: rotateX(-30deg) rotateY(0deg); - } - 100% { - transform: rotateX(-30deg) rotateY(360deg); - } +a:hover { + color: #255784; + background: #2196f3; + box-shadow: 0 0 10px #2196f3, + 0 0 40px #2196f3, + 0 0 80px #2196f3; + transition-delay: 1s; } -.cube div { +a span { position: absolute; + display: block; +} + +a span:nth-child(1) { top: 0; - left: 0; + left: -100%; width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, #2196f3); +} + +a:hover span:nth-child(1) { + left: 100%; + transition: 1s; +} + +a span:nth-child(2) { + top: -100%; + right: 0; + width: 2px; height: 100%; - transform-style: preserve-3d; + background: linear-gradient(180deg, transparent, #2196f3); } -.cube div span { - position: absolute; - top: 0; - left: 0; +a:hover span:nth-child(2) { + top: 100%; + transition: 1s; + transition-delay: 0.25s; +} + +a span:nth-child(3) { + bottom: 0; + right: -100%; width: 100%; - height: 100%; - background: linear-gradient(#151515, #00ec00); - transform: rotateY(calc(90deg * var(--i))) translateZ(150px); /* 300 / 2 = 150 */ + height: 2px; + background: linear-gradient(270deg, transparent, #2196f3); } -.top { - position: absolute; - top: 0; - left: 0; - width: 300px; - height: 300px; - background: #222; - transform: rotateX(90deg) translateZ(150px); +a:hover span:nth-child(3) { + right: 100%; + transition: 1s; + transition-delay: 0.5s; } -.top::before { - content: ''; - position: absolute; - top: 0; +a span:nth-child(4) { + bottom: -100%; left: 0; - width: 300px; - height: 300px; - background: #0f0; - transform: translateZ(-380px); - filter: blur(20px); - box-shadow: 0 0 120px rgba(0, 255, 0, 0.2), - 0 0 200px rgba(0, 255, 0, 0.4), - 0 0 300px rgba(0, 255, 0, 0.6), - 0 0 400px rgba(0, 255, 0, 0.8), - 0 0 500px rgba(0, 255, 0, 1); + width: 2px; + height: 100%; + background: linear-gradient(3600deg, transparent, #2196f3); } + +a:hover span:nth-child(4) { + bottom: 100%; + transition: 1s; + transition-delay: 0.75s; +} + From 7a804c70fb6cff21ac8a68f0cee0bf4a11767b98 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti <80033304+filippoerbisti@users.noreply.github.com> Date: Fri, 20 May 2022 09:53:15 +0200 Subject: [PATCH 06/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eb8429b..82cf4cd 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Ambient Light Effect +# Neon Light Button Animation on Hover -View and try [DEMO](https://codepen.io/filippoerbisti/pen/XWZgKpv) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/RwQgRej) on Codepen. From 947e3df990d5123c418bf377c49e5bb5f1f21801 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 10:18:03 +0200 Subject: [PATCH 07/21] neon-light-button-animation-infinite --- index.html | 16 ++++++++- style.css | 102 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 83 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 23150cf..a8b5e12 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Neon Light Button Animation Effects on Hover + Neon Light Button Animation Effects @@ -15,5 +15,19 @@ Neon Button + + + + + + Neon Button + + + + + + + Neon Button + \ No newline at end of file diff --git a/style.css b/style.css index bd2a654..b3cc0cc 100644 --- a/style.css +++ b/style.css @@ -1,34 +1,49 @@ -body { +* { margin: 0; padding: 0; + font-family: consolas; + box-sizing: border-box; +} + +body { display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; min-height: 100vh; - background: #031321; - font-family: consolas; + flex-direction: row; + background: #050801; } a { position: relative; display: inline-block; - padding: 15px 30px; - color: #2196f3; + padding: 25px 30px; + margin: 40px 0; + color: #03e9f4; text-transform: uppercase; letter-spacing: 4px; text-decoration: none; font-size: 24px; overflow: hidden; - transition: 0.2s; + transition: 0.5s; + -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); +} + +a:nth-child(1) { + filter: hue-rotate(290deg); +} + +a:nth-child(3) { + filter: hue-rotate(110deg); } a:hover { - color: #255784; - background: #2196f3; - box-shadow: 0 0 10px #2196f3, - 0 0 40px #2196f3, - 0 0 80px #2196f3; - transition-delay: 1s; + background: #03e9f4; + color: #050801; + box-shadow: 0 0 5px #03e9f4, + 0 0 25px #03e9f4, + 0 0 50px #03e9f4, + 0 0 200px #03e9f4; } a span { @@ -41,12 +56,17 @@ a span:nth-child(1) { left: -100%; width: 100%; height: 2px; - background: linear-gradient(90deg, transparent, #2196f3); + background: linear-gradient(90deg, transparent, #03e9f4); + animation: animate1 1s linear infinite; } -a:hover span:nth-child(1) { - left: 100%; - transition: 1s; +@keyframes animate1 { + 0% { + left: -100%; + } + 50%, 100% { + left: 100%; + } } a span:nth-child(2) { @@ -54,13 +74,18 @@ a span:nth-child(2) { right: 0; width: 2px; height: 100%; - background: linear-gradient(180deg, transparent, #2196f3); + background: linear-gradient(180deg, transparent, #03e9f4); + animation: animate2 1s linear infinite; + animation-delay: 0.25s; } -a:hover span:nth-child(2) { - top: 100%; - transition: 1s; - transition-delay: 0.25s; +@keyframes animate2 { + 0% { + top: -100%; + } + 50%, 100% { + top: 100%; + } } a span:nth-child(3) { @@ -68,13 +93,18 @@ a span:nth-child(3) { right: -100%; width: 100%; height: 2px; - background: linear-gradient(270deg, transparent, #2196f3); + background: linear-gradient(270deg, transparent, #03e9f4); + animation: animate3 1s linear infinite; + animation-delay: 0.50s; } -a:hover span:nth-child(3) { - right: 100%; - transition: 1s; - transition-delay: 0.5s; +@keyframes animate3 { + 0% { + right: -100%; + } + 50%, 100% { + right: 100%; + } } a span:nth-child(4) { @@ -82,12 +112,16 @@ a span:nth-child(4) { left: 0; width: 2px; height: 100%; - background: linear-gradient(3600deg, transparent, #2196f3); -} - -a:hover span:nth-child(4) { - bottom: 100%; - transition: 1s; - transition-delay: 0.75s; + background: linear-gradient(360deg, transparent, #03e9f4); + animation: animate4 1s linear infinite; + animation-delay: 0.75s; } +@keyframes animate4 { + 0% { + bottom: -100%; + } + 50%, 100% { + bottom: 100%; + } +} \ No newline at end of file From 07c3e685f06c56fcdba01ee194ac4897f6feb63f Mon Sep 17 00:00:00 2001 From: Filippo Erbisti <80033304+filippoerbisti@users.noreply.github.com> Date: Fri, 20 May 2022 10:21:18 +0200 Subject: [PATCH 08/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 82cf4cd..dafd2fa 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Neon Light Button Animation on Hover +# Neon Light Button Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/RwQgRej) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/ExQXgKZ) on Codepen. From 938e160fe67fd757966095bf33d00e283297a8d1 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 10:30:36 +0200 Subject: [PATCH 09/21] glowing-gradient-loader-ring --- index.html | 24 +-------- style.css | 140 ++++++++++++++--------------------------------------- 2 files changed, 38 insertions(+), 126 deletions(-) diff --git a/index.html b/index.html index a8b5e12..f6c97a7 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,10 @@ - Neon Light Button Animation Effects + Glowing Gradient Loader Ring Animation Effects - - - - - - Neon Button - - - - - - - Neon Button - - - - - - - Neon Button - +
\ No newline at end of file diff --git a/style.css b/style.css index b3cc0cc..fa277eb 100644 --- a/style.css +++ b/style.css @@ -1,127 +1,59 @@ * { margin: 0; padding: 0; - font-family: consolas; box-sizing: border-box; } body { display: flex; - justify-content: space-evenly; + justify-content: center; align-items: center; min-height: 100vh; - flex-direction: row; - background: #050801; + background: #000; } -a { +.loader { position: relative; - display: inline-block; - padding: 25px 30px; - margin: 40px 0; - color: #03e9f4; - text-transform: uppercase; - letter-spacing: 4px; - text-decoration: none; - font-size: 24px; - overflow: hidden; - transition: 0.5s; - -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); + width: 150px; + height: 150px; + border-radius: 50%; + background: linear-gradient(45deg, transparent, transparent 40%, #e5f403); + animation: animate 2s linear infinite; } -a:nth-child(1) { - filter: hue-rotate(290deg); -} - -a:nth-child(3) { - filter: hue-rotate(110deg); -} - -a:hover { - background: #03e9f4; - color: #050801; - box-shadow: 0 0 5px #03e9f4, - 0 0 25px #03e9f4, - 0 0 50px #03e9f4, - 0 0 200px #03e9f4; -} - -a span { - position: absolute; - display: block; -} - -a span:nth-child(1) { - top: 0; - left: -100%; - width: 100%; - height: 2px; - background: linear-gradient(90deg, transparent, #03e9f4); - animation: animate1 1s linear infinite; -} - -@keyframes animate1 { +@keyframes animate { 0% { - left: -100%; + transform: rotate(0deg); + filter: hue-rotate(0deg); } - 50%, 100% { - left: 100%; + 100% { + transform: rotate(360deg); + filter: hue-rotate(360deg); } } -a span:nth-child(2) { - top: -100%; - right: 0; - width: 2px; - height: 100%; - background: linear-gradient(180deg, transparent, #03e9f4); - animation: animate2 1s linear infinite; - animation-delay: 0.25s; -} - -@keyframes animate2 { - 0% { - top: -100%; - } - 50%, 100% { - top: 100%; - } -} - -a span:nth-child(3) { - bottom: 0; - right: -100%; - width: 100%; - height: 2px; - background: linear-gradient(270deg, transparent, #03e9f4); - animation: animate3 1s linear infinite; - animation-delay: 0.50s; -} - -@keyframes animate3 { - 0% { - right: -100%; - } - 50%, 100% { - right: 100%; - } +.loader::before { + content: ''; + position: absolute; + top: 6px; + left: 6px; + right: 6px; + bottom: 6px; + background: #000; + border-radius: 50%; + z-index: 1000; } -a span:nth-child(4) { - bottom: -100%; - left: 0; - width: 2px; - height: 100%; - background: linear-gradient(360deg, transparent, #03e9f4); - animation: animate4 1s linear infinite; - animation-delay: 0.75s; +.loader::after { + content: ''; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: linear-gradient(45deg, transparent, transparent 40%, #e5f403); + border-radius: 50%; + z-index: 1000; + z-index: 1; + filter: blur(30px); } - -@keyframes animate4 { - 0% { - bottom: -100%; - } - 50%, 100% { - bottom: 100%; - } -} \ No newline at end of file From 4d571460a1c27cee2626ca6d929bc8503ec2f509 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti <80033304+filippoerbisti@users.noreply.github.com> Date: Fri, 20 May 2022 10:32:49 +0200 Subject: [PATCH 10/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dafd2fa..5bc4967 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Neon Light Button Animation Effects +# Glowing Gradient Loader Ring Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/ExQXgKZ) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/qBxjamV) on Codepen. From 1509cc75586109bc9a1fd32bd0cbadc5d83aa291 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 10:47:53 +0200 Subject: [PATCH 11/21] water-wave-text-animation --- index.html | 7 ++++-- style.css | 64 +++++++++++++++++++++++------------------------------- 2 files changed, 32 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index f6c97a7..df2a42f 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,13 @@ - Glowing Gradient Loader Ring Animation Effects + Water Wave Text Animation Effects -
+
+

Water

+

Water

+
\ No newline at end of file diff --git a/style.css b/style.css index fa277eb..9dfe4b5 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,10 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); + * { margin: 0; padding: 0; box-sizing: border-box; + font-family: 'Poppins', sans-serif; } body { @@ -12,48 +15,35 @@ body { background: #000; } -.loader { +.content { position: relative; - width: 150px; - height: 150px; - border-radius: 50%; - background: linear-gradient(45deg, transparent, transparent 40%, #e5f403); - animation: animate 2s linear infinite; } -@keyframes animate { - 0% { - transform: rotate(0deg); - filter: hue-rotate(0deg); - } - 100% { - transform: rotate(360deg); - filter: hue-rotate(360deg); - } +.content h2 { + position: absolute; + transform: translate(-50%, -50%); + font-size: 8em; } -.loader::before { - content: ''; - position: absolute; - top: 6px; - left: 6px; - right: 6px; - bottom: 6px; - background: #000; - border-radius: 50%; - z-index: 1000; +.content h2:nth-child(1) { + color: transparent; + -webkit-text-stroke: 2px #03a9f4; } -.loader::after { - content: ''; - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background: linear-gradient(45deg, transparent, transparent 40%, #e5f403); - border-radius: 50%; - z-index: 1000; - z-index: 1; - filter: blur(30px); +.content h2:nth-child(2) { + color: #03a9f4; + animation: animate 4s ease-in-out infinite; +} + +@keyframes animate { + 0%, 100% { + clip-path: polygon(0% 45%, 15% 44%, 32% 50%, + 54% 60%, 70% 61%, 84% 59%, 100% 52%, + 100% 100%, 0% 100%); + } + 50% { + clip-path: polygon(0% 60%, 16% 65%, 34% 66%, + 51% 62%, 67% 50%, 84% 45%, 100% 46%, + 100% 100%, 0% 100%); + } } From 3b8d57478ed596962e7e0a4d2e734facb607985f Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 10:52:09 +0200 Subject: [PATCH 12/21] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5bc4967..20a4dc3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Glowing Gradient Loader Ring Animation Effects +# Water Wave Text Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/qBxjamV) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/BaYZLGB) on Codepen. From bb71bdef6385a1e8572ccc9433d27030c4dfa4b7 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 11:08:02 +0200 Subject: [PATCH 13/21] glowing-text-animation --- index.html | 16 +++++++---- style.css | 81 ++++++++++++++++++++++++++++++++++++------------------ 2 files changed, 66 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index df2a42f..7a6a2e7 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,19 @@ - Water Wave Text Animation Effects + Glowing Text Animation -
-

Water

-

Water

-
+

+ S + t + u + n + n + i + n + g +

\ No newline at end of file diff --git a/style.css b/style.css index 9dfe4b5..c89b0dc 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,9 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); +@import url('https://fonts.googleapis.com/css?family=Bad+Script'); -* { +body { margin: 0; padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - -body { + font-family: 'Bad Script', cursive; display: flex; justify-content: center; align-items: center; @@ -15,35 +11,68 @@ body { background: #000; } -.content { - position: relative; +h1 { + margin: 0; + padding: 0; + color: #111; + font-size: 16em; +} + +h1 span { + display: table-cell; + margin: 0; + padding: 0; + animation: animate 2s linear infinite; +} + +h1 span:nth-child(1) { + animation-delay: 0s; +} + +h1 span:nth-child(2) { + animation-delay: 0.25s; +} + +h1 span:nth-child(3) { + animation-delay: 0.5s; +} + +h1 span:nth-child(4) { + animation-delay: 0.75s; +} + +h1 span:nth-child(5) { + animation-delay: 1s; } -.content h2 { - position: absolute; - transform: translate(-50%, -50%); - font-size: 8em; +h1 span:nth-child(6) { + animation-delay: 1.25s; } -.content h2:nth-child(1) { - color: transparent; - -webkit-text-stroke: 2px #03a9f4; +h1 span:nth-child(7) { + animation-delay: 1.50s; } -.content h2:nth-child(2) { - color: #03a9f4; - animation: animate 4s ease-in-out infinite; +h1 span:nth-child(8) { + animation-delay: 1.75s; } @keyframes animate { 0%, 100% { - clip-path: polygon(0% 45%, 15% 44%, 32% 50%, - 54% 60%, 70% 61%, 84% 59%, 100% 52%, - 100% 100%, 0% 100%); + color: #fff; + filter: blur(2px); + text-shadow: 0 0 10px #00b3ff, + 0 0 20px #00b3ff, + 0 0 40px #00b3ff, + 0 0 80px #00b3ff, + 0 0 120px #00b3ff, + 0 0 200px #00b3ff, + 0 0 300px #00b3ff, + 0 0 400px #00b3ff; } - 50% { - clip-path: polygon(0% 60%, 16% 65%, 34% 66%, - 51% 62%, 67% 50%, 84% 45%, 100% 46%, - 100% 100%, 0% 100%); + 5%, 95% { + color: #111; + filter: blur(0px); + text-shadow: none; } } From 6c8fe36666b1f47af916f2d067554ca0cbba0705 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 11:09:11 +0200 Subject: [PATCH 14/21] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 20a4dc3..0512de7 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Water Wave Text Animation Effects +# Glowing Text Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/BaYZLGB) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/NWygbPr) on Codepen. From 72d65f0c681ac137fda0fcc248198290e636ee9a Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 11:56:00 +0200 Subject: [PATCH 15/21] 3d-wavy-circle-loader --- index.html | 29 +++++---- style.css | 177 +++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 149 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 7a6a2e7..0edc23f 100644 --- a/index.html +++ b/index.html @@ -4,19 +4,26 @@ - Glowing Text Animation + 3D Wavy Circle Loading Animation -

- S - t - u - n - n - i - n - g -

+
+ + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/style.css b/style.css index c89b0dc..ca83a79 100644 --- a/style.css +++ b/style.css @@ -1,78 +1,163 @@ @import url('https://fonts.googleapis.com/css?family=Bad+Script'); -body { +* { margin: 0; padding: 0; - font-family: 'Bad Script', cursive; +} + +body { + display: flex; justify-content: center; align-items: center; min-height: 100vh; - background: #000; + background: #0c27b0; } -h1 { - margin: 0; - padding: 0; - color: #111; - font-size: 16em; +.loader { + position: relative; + width: 300px; + height: 300px; + transform-style: preserve-3d; + transform: perspective(500px) rotateX(60deg); } -h1 span { - display: table-cell; - margin: 0; - padding: 0; - animation: animate 2s linear infinite; +.loader span { + position: absolute; + display: block; + border: 5px solid #fff; + box-shadow: 0 5px 0 #ccc, + inset 0 5px #ccc; + box-sizing: border-box; + border-radius: 50%; + animation: animate 3s ease-in-out infinite; } -h1 span:nth-child(1) { - animation-delay: 0s; +@keyframes animate { + 0% { + transform: translateZ(-100px); + } + 50% { + transform: translateZ(100px); + } } -h1 span:nth-child(2) { - animation-delay: 0.25s; +.loader span:nth-child(1) { + top: 0; + left: 0; + bottom: 0; + right: 0; + animation-delay: 1.4s; } -h1 span:nth-child(3) { - animation-delay: 0.5s; +.loader span:nth-child(2) { + top: 10px; + left: 10px; + bottom: 10px; + right: 10px; + animation-delay: 1.3s; +} + +.loader span:nth-child(3) { + top: 20px; + left: 20px; + bottom: 20px; + right: 20px; + animation-delay: 1.2s; } -h1 span:nth-child(4) { - animation-delay: 0.75s; +.loader span:nth-child(4) { + top: 30px; + left: 30px; + bottom: 30px; + right: 30px; + animation-delay: 1.1s; } -h1 span:nth-child(5) { +.loader span:nth-child(5) { + top: 40px; + left: 40px; + bottom: 40px; + right: 40px; animation-delay: 1s; } -h1 span:nth-child(6) { - animation-delay: 1.25s; +.loader span:nth-child(6) { + top: 50px; + left: 50px; + bottom: 50px; + right: 50px; + animation-delay: 0.9s; } -h1 span:nth-child(7) { - animation-delay: 1.50s; +.loader span:nth-child(7) { + top: 60px; + left: 60px; + bottom: 60px; + right: 60px; + animation-delay: 0.8s; } -h1 span:nth-child(8) { - animation-delay: 1.75s; +.loader span:nth-child(8) { + top: 70px; + left: 70px; + bottom: 70px; + right: 70px; + animation-delay: 0.7s; } -@keyframes animate { - 0%, 100% { - color: #fff; - filter: blur(2px); - text-shadow: 0 0 10px #00b3ff, - 0 0 20px #00b3ff, - 0 0 40px #00b3ff, - 0 0 80px #00b3ff, - 0 0 120px #00b3ff, - 0 0 200px #00b3ff, - 0 0 300px #00b3ff, - 0 0 400px #00b3ff; - } - 5%, 95% { - color: #111; - filter: blur(0px); - text-shadow: none; - } +.loader span:nth-child(9) { + top: 80px; + left: 80px; + bottom: 80px; + right: 80px; + animation-delay: 0.6s; +} + +.loader span:nth-child(10) { + top: 90px; + left: 90px; + bottom: 90px; + right: 90px; + animation-delay: 0.5s; +} + +.loader span:nth-child(11) { + top: 100px; + left: 100px; + bottom: 100px; + right: 100px; + animation-delay: 0.4s; } + +.loader span:nth-child(12) { + top: 110px; + left: 110px; + bottom: 110px; + right: 110px; + animation-delay: 0.3s; +} + +.loader span:nth-child(13) { + top: 120px; + left: 120px; + bottom: 120px; + right: 120px; + animation-delay: 0.2s; +} + +.loader span:nth-child(14) { + top: 130px; + left: 130px; + bottom: 130px; + right: 130px; + animation-delay: 0.1s; +} + +.loader span:nth-child(15) { + top: 140px; + left: 140px; + bottom: 140px; + right: 140px; + animation-delay: 0s; +} \ No newline at end of file From 3b140ffb9fae3fd89ce4216beba8050056bd6f3a Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 11:57:05 +0200 Subject: [PATCH 16/21] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0512de7..95d7f6b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# Glowing Text Animation Effects +# £D Wavy Circle Loader Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/NWygbPr) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/MWQobzB) on Codepen. From fabaecd68e32a309adc062856e5621c8c704adcd Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 12:00:16 +0200 Subject: [PATCH 17/21] update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 95d7f6b..15b389d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# £D Wavy Circle Loader Animation Effects +# 3D Wavy Circle Loader Animation Effects View and try [DEMO](https://codepen.io/filippoerbisti/pen/MWQobzB) on Codepen. From 78d6e7c502b615046517bf2a661bb245bffe2347 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 12:18:06 +0200 Subject: [PATCH 18/21] 3d-flip-checkbox --- index.html | 22 ++---- style.css | 210 ++++++++++++++++++----------------------------------- 2 files changed, 77 insertions(+), 155 deletions(-) diff --git a/index.html b/index.html index 0edc23f..da19d98 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,14 @@ - 3D Wavy Circle Loading Animation + 3D Flip Checkbox Animation -
- - - - - - - - - - - - - - - +
+ + On + Off
\ No newline at end of file diff --git a/style.css b/style.css index ca83a79..09014f5 100644 --- a/style.css +++ b/style.css @@ -1,163 +1,97 @@ -@import url('https://fonts.googleapis.com/css?family=Bad+Script'); - -* { +body { margin: 0; padding: 0; + font-family: sans-serif; } -body { - - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: #0c27b0; +.center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transform-style: preserve-3d; + perspective: 200px; + border: 2px solid #000; + width: 100px; + height: 40px; + border-radius: 40px; } -.loader { +input[type="checkbox"] { position: relative; - width: 300px; - height: 300px; - transform-style: preserve-3d; - transform: perspective(500px) rotateX(60deg); + width: 100px; + height: 40px; + margin: 0; + -webkit-appearance: none; + outline: none; + transition: 0.5s; + cursor: pointer; } -.loader span { +span { position: absolute; - display: block; - border: 5px solid #fff; - box-shadow: 0 5px 0 #ccc, - inset 0 5px #ccc; - box-sizing: border-box; - border-radius: 50%; - animation: animate 3s ease-in-out infinite; + top: 0; + width: 50%; + height: 100%; + line-height: 40px; + height: 40px; + text-align: center; + text-transform: uppercase; + font-weight: bold; + pointer-events: none; + color: #fff; + transform-style: preserve-3d; } -@keyframes animate { - 0% { - transform: translateZ(-100px); - } - 50% { - transform: translateZ(100px); - } +span:nth-child(2) { + left: 0; + border-top-left-radius: 40px; + border-bottom-left-radius: 40px; + background: #0f0; } -.loader span:nth-child(1) { +span:nth-child(2)::before { + content: ''; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - animation-delay: 1.4s; -} - -.loader span:nth-child(2) { - top: 10px; - left: 10px; - bottom: 10px; - right: 10px; - animation-delay: 1.3s; -} - -.loader span:nth-child(3) { - top: 20px; - left: 20px; - bottom: 20px; - right: 20px; - animation-delay: 1.2s; -} - -.loader span:nth-child(4) { - top: 30px; - left: 30px; - bottom: 30px; - right: 30px; - animation-delay: 1.1s; -} - -.loader span:nth-child(5) { - top: 40px; - left: 40px; - bottom: 40px; - right: 40px; - animation-delay: 1s; -} - -.loader span:nth-child(6) { - top: 50px; - left: 50px; - bottom: 50px; - right: 50px; - animation-delay: 0.9s; -} - -.loader span:nth-child(7) { - top: 60px; - left: 60px; - bottom: 60px; - right: 60px; - animation-delay: 0.8s; -} - -.loader span:nth-child(8) { - top: 70px; - left: 70px; - bottom: 70px; - right: 70px; - animation-delay: 0.7s; + width: 100%; + height: 100%; + background: linear-gradient(90deg, #f00, #de0808); + border-top-left-radius: 40px; + border-bottom-left-radius: 40px; + transform-origin: right; + transition: 1s; + backface-visibility: hidden; } -.loader span:nth-child(9) { - top: 80px; - left: 80px; - bottom: 80px; - right: 80px; - animation-delay: 0.6s; +input[type="checkbox"]:checked ~ span:nth-child(2)::before { + transform: rotateY(180deg); } -.loader span:nth-child(10) { - top: 90px; - left: 90px; - bottom: 90px; - right: 90px; - animation-delay: 0.5s; -} - -.loader span:nth-child(11) { - top: 100px; - left: 100px; - bottom: 100px; - right: 100px; - animation-delay: 0.4s; -} - -.loader span:nth-child(12) { - top: 110px; - left: 110px; - bottom: 110px; - right: 110px; - animation-delay: 0.3s; +span:nth-child(3) { + right: 0; + border-top-right-radius: 40px; + border-bottom-right-radius: 40px; + background: #f00; } -.loader span:nth-child(13) { - top: 120px; - left: 120px; - bottom: 120px; - right: 120px; - animation-delay: 0.2s; +span:nth-child(3)::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(90deg, #0cd20c, #0f0); + border-top-right-radius: 40px; + border-bottom-right-radius: 40px; + transform-origin: left; + transition: 1s; + backface-visibility: hidden; + transform: rotateY(180deg); } -.loader span:nth-child(14) { - top: 130px; - left: 130px; - bottom: 130px; - right: 130px; - animation-delay: 0.1s; +input[type="checkbox"]:checked ~ span:nth-child(3)::before { + transform: rotateY(360deg); } - -.loader span:nth-child(15) { - top: 140px; - left: 140px; - bottom: 140px; - right: 140px; - animation-delay: 0s; -} \ No newline at end of file From 176c77eb864dab8a66fefb63f90cf1996e647539 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 12:19:43 +0200 Subject: [PATCH 19/21] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 15b389d..c8d7355 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# 3D Wavy Circle Loader Animation Effects +# 3D Flip Checkbox Animation Effects -View and try [DEMO](https://codepen.io/filippoerbisti/pen/MWQobzB) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/MWQoJaZ) on Codepen. From bcaba8922d0adef4a2a3e9f0ab1de949f493a359 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 14:44:33 +0200 Subject: [PATCH 20/21] animated-eyes-follow-mouse-cursor --- index.html | 27 +++++++++--- style.css | 120 +++++++++++++++-------------------------------------- 2 files changed, 55 insertions(+), 92 deletions(-) diff --git a/index.html b/index.html index da19d98..e15a139 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,31 @@ - 3D Flip Checkbox Animation + Animated Eyes Follow Mouse Cursor + -
- - On - Off +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index 09014f5..c872213 100644 --- a/style.css +++ b/style.css @@ -1,97 +1,43 @@ -body { +* { margin: 0; padding: 0; - font-family: sans-serif; -} - -.center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transform-style: preserve-3d; - perspective: 200px; - border: 2px solid #000; - width: 100px; - height: 40px; - border-radius: 40px; -} - -input[type="checkbox"] { - position: relative; - width: 100px; - height: 40px; - margin: 0; - -webkit-appearance: none; - outline: none; - transition: 0.5s; - cursor: pointer; -} - -span { - position: absolute; - top: 0; - width: 50%; - height: 100%; - line-height: 40px; - height: 40px; - text-align: center; - text-transform: uppercase; - font-weight: bold; - pointer-events: none; - color: #fff; - transform-style: preserve-3d; } -span:nth-child(2) { - left: 0; - border-top-left-radius: 40px; - border-bottom-left-radius: 40px; - background: #0f0; -} - -span:nth-child(2)::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - background: linear-gradient(90deg, #f00, #de0808); - border-top-left-radius: 40px; - border-bottom-left-radius: 40px; - transform-origin: right; - transition: 1s; - backface-visibility: hidden; -} - -input[type="checkbox"]:checked ~ span:nth-child(2)::before { - transform: rotateY(180deg); +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: radial-gradient(#f2761e, #ef4921); } -span:nth-child(3) { - right: 0; - border-top-right-radius: 40px; - border-bottom-right-radius: 40px; - background: #f00; +.box { + display: flex; } -span:nth-child(3)::before { +.box .eye { + position: relative; + width: 120px; + height: 120px; + display: block; + background: #fff; + margin: 0 20px; + border-radius: 50%; + box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2), + inset 0 0 15px #f2761e, + inset 0 0 25px #f2761e; +} + +.box .eye::before { content: ''; position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(90deg, #0cd20c, #0f0); - border-top-right-radius: 40px; - border-bottom-right-radius: 40px; - transform-origin: left; - transition: 1s; - backface-visibility: hidden; - transform: rotateY(180deg); -} - -input[type="checkbox"]:checked ~ span:nth-child(3)::before { - transform: rotateY(360deg); -} + top: 50%; + left: 35px; + transform: translate(-50%, -50%); + width: 45px; + height: 45px; + border-radius: 50%; + background: #000; + border: 10px solid #2196f3; + box-sizing: border-box; +} \ No newline at end of file From b135fa5e179d0e7ec26272692621e56303edbf99 Mon Sep 17 00:00:00 2001 From: Filippo Erbisti Date: Fri, 20 May 2022 14:45:57 +0200 Subject: [PATCH 21/21] update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c8d7355..8443dd1 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ -# 3D Flip Checkbox Animation Effects +# Animated Eyes Follow Mouse Cursor -View and try [DEMO](https://codepen.io/filippoerbisti/pen/MWQoJaZ) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/poawPqL) on Codepen.