From f41e6809f0f415929c2560aa9b87c77076396f5a Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 24 Oct 2022 00:30:53 +0530 Subject: [PATCH 1/2] Added a dark hover animation card --- .../Dark card hover animation/index.html | 63 +++++++++++++++++++ .../Dark card hover animation/style.css | 54 ++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 Card Animations/Dark card hover animation/index.html create mode 100644 Card Animations/Dark card hover animation/style.css diff --git a/Card Animations/Dark card hover animation/index.html b/Card Animations/Dark card hover animation/index.html new file mode 100644 index 0000000..2f81b37 --- /dev/null +++ b/Card Animations/Dark card hover animation/index.html @@ -0,0 +1,63 @@ + + + + + + + Card Effect + + + + + +
+
+
+
+ +

windows

+
+
+
+
+

It takes courage and hardwork to be developer

+ read more +
+
+
+ +
+
+
+ +

anderoid

+
+
+
+
+

It takes courage and hardwork to be developer

+ read more +
+
+
+
+
+ +

apple

+
+
+
+
+

It takes courage and hardwork to be developer

+ read more +
+
+
+ +
+ + + \ No newline at end of file diff --git a/Card Animations/Dark card hover animation/style.css b/Card Animations/Dark card hover animation/style.css new file mode 100644 index 0000000..2feb67d --- /dev/null +++ b/Card Animations/Dark card hover animation/style.css @@ -0,0 +1,54 @@ +body +{ + display: flex; + margin: 0; + padding: 0; + min-height: 100vh; + background: #444; + justify-content: center; + align-items: center; + font-family: Arial, Helvetica, sans-serif; +} +.container{ + width: 1000px; + position: relative; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.container .card { + position: relative; + +} + .container .card .face{ + width: 300px; + height: 200px; + transition: 4s; + + } + .container .card:hover .face.face1{ + transform: translateY(0); + box-shadow: + +inset 0 0 60px whitesmoke, +inset 20px 0 80px #f0f, + +inset -20px 0 80px #0ff, + +inset 20px 0 300px #f0f, + +inset -20px 0 300px #0ff, + +0 0 50px #fff, + +-10px 0 80px #f0f +, 18px 0 80px + } + .container .card .face.face1 .content { + opacity: .2; + transition: 0.5s; + text-align: center; + } + .container .card:hover .face.face1 .content{ + opacity: 1; + } \ No newline at end of file From d9afa4a7c03d7d3d5b3eabee2bb46619324626a3 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 24 Oct 2022 14:30:31 +0530 Subject: [PATCH 2/2] Added a text gradient animation --- .../Dark card hover animation/index.html | 63 ------------------- .../Dark card hover animation/style.css | 54 ---------------- .../Text gradient animation/index.html | 13 ++++ .../Text gradient animation/style.css | 36 +++++++++++ 4 files changed, 49 insertions(+), 117 deletions(-) delete mode 100644 Card Animations/Dark card hover animation/index.html delete mode 100644 Card Animations/Dark card hover animation/style.css create mode 100644 Hover Animations/Text gradient animation/index.html create mode 100644 Hover Animations/Text gradient animation/style.css diff --git a/Card Animations/Dark card hover animation/index.html b/Card Animations/Dark card hover animation/index.html deleted file mode 100644 index 2f81b37..0000000 --- a/Card Animations/Dark card hover animation/index.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - Card Effect - - - - - -
-
-
-
- -

windows

-
-
-
-
-

It takes courage and hardwork to be developer

- read more -
-
-
- -
-
-
- -

anderoid

-
-
-
-
-

It takes courage and hardwork to be developer

- read more -
-
-
-
-
- -

apple

-
-
-
-
-

It takes courage and hardwork to be developer

- read more -
-
-
- -
- - - \ No newline at end of file diff --git a/Card Animations/Dark card hover animation/style.css b/Card Animations/Dark card hover animation/style.css deleted file mode 100644 index 2feb67d..0000000 --- a/Card Animations/Dark card hover animation/style.css +++ /dev/null @@ -1,54 +0,0 @@ -body -{ - display: flex; - margin: 0; - padding: 0; - min-height: 100vh; - background: #444; - justify-content: center; - align-items: center; - font-family: Arial, Helvetica, sans-serif; -} -.container{ - width: 1000px; - position: relative; - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} -.container .card { - position: relative; - -} - .container .card .face{ - width: 300px; - height: 200px; - transition: 4s; - - } - .container .card:hover .face.face1{ - transform: translateY(0); - box-shadow: - -inset 0 0 60px whitesmoke, -inset 20px 0 80px #f0f, - -inset -20px 0 80px #0ff, - -inset 20px 0 300px #f0f, - -inset -20px 0 300px #0ff, - -0 0 50px #fff, - --10px 0 80px #f0f -, 18px 0 80px - } - .container .card .face.face1 .content { - opacity: .2; - transition: 0.5s; - text-align: center; - } - .container .card:hover .face.face1 .content{ - opacity: 1; - } \ No newline at end of file diff --git a/Hover Animations/Text gradient animation/index.html b/Hover Animations/Text gradient animation/index.html new file mode 100644 index 0000000..39cfacb --- /dev/null +++ b/Hover Animations/Text gradient animation/index.html @@ -0,0 +1,13 @@ + + + + + + + Text Gradient Animations + + + +
This text will demonstrate the gradient animation
+ + \ No newline at end of file diff --git a/Hover Animations/Text gradient animation/style.css b/Hover Animations/Text gradient animation/style.css new file mode 100644 index 0000000..e16ce1e --- /dev/null +++ b/Hover Animations/Text gradient animation/style.css @@ -0,0 +1,36 @@ +body{ + background-color: #45011A; +} +.text{ + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + background: linear-gradient(-45deg,#DFB79E,#DFB79E,#2B0413, #2B0413, #E25052, #E25052); + background-size: 300%; + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + font-size: 5vw; + letter-spacing: -5px; + text-transform: uppercase; + -webkit-background-clip:text; + + -webkit-text-fill-color: transparent; + animation: animated_text 6s ease-in-out infinite; + -moz-animation: animated_text 6s ease-in-out infinite; + -webkit-animation: animated_text 6s ease-in-out infinite; + + +} +@keyframes animated_text { + 0%{ + background-position: 0px 50%; + + } + 50%{ + background-position: 100% 50% ; + } + 100%{ + background-position: 0px 50%; + } +} \ No newline at end of file