From 94a81f5a19fbc7aaf381c3e0e30aa05865515798 Mon Sep 17 00:00:00 2001 From: Shreyans2004 <128773151+Shreyans2004@users.noreply.github.com> Date: Wed, 9 Aug 2023 16:14:31 +0000 Subject: [PATCH] Hello-Friend animation added --- .../Hello-friend animation/index.html | 45 +++++++++++++++++++ .../Hello-friend animation/styles.css | 38 ++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 Frontend-Projects/Hello-friend animation/index.html create mode 100644 Frontend-Projects/Hello-friend animation/styles.css diff --git a/Frontend-Projects/Hello-friend animation/index.html b/Frontend-Projects/Hello-friend animation/index.html new file mode 100644 index 0000000000..e168c925eb --- /dev/null +++ b/Frontend-Projects/Hello-friend animation/index.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Document</title> + <link rel="stylesheet" href="./styles.css" /> + </head> + <body> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">..........</div> + <div id="main">Hello friend</div> + </body> +</html> diff --git a/Frontend-Projects/Hello-friend animation/styles.css b/Frontend-Projects/Hello-friend animation/styles.css new file mode 100644 index 0000000000..09fe8b546b --- /dev/null +++ b/Frontend-Projects/Hello-friend animation/styles.css @@ -0,0 +1,38 @@ +body{ + width:100vw; +height: 100vh; +display: flex; +justify-content: center; +align-items: center; +overflow: hidden; + + +} +#main{ + + display: flex; +justify-content: center; +align-items: center; +flex-direction: column; + +font-size: 0.1rem; + + height: 300px; + animation: animate 6s ease-in-out infinite ; +border-radius: 30%; +background-size: 4em 4em; + + background-image: repeating-conic-gradient(deeppink 0deg, deeppink,90deg,white 90deg ,white 180deg, deeppink 180deg, deeppink 270deg,white 270deg ,white 360deg); +} +@keyframes animate { + 0%{ + transform: rotateY(0deg) ; + } + 50%{ + transform: rotateZ(180deg) translateX(-200px); + } + 100%{ + transform: rotateZ(360deg) translateZ(200px) scale(100); + } + +} \ No newline at end of file