diff --git a/Minecraft Spider Loader/README.md b/Minecraft Spider Loader/README.md new file mode 100644 index 00000000..34589d19 --- /dev/null +++ b/Minecraft Spider Loader/README.md @@ -0,0 +1,20 @@ + +# Miecraft Sider Spinner + +## 🚀 About Me +I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777 + + +## Run Locally + +Clone the project + + +Start the live server + + +## Used By + +This project is used by the following companies: + +-https://github.com/Dezenix/frontend-html-css-js diff --git a/Minecraft Spider Loader/index.html b/Minecraft Spider Loader/index.html new file mode 100644 index 00000000..a8a0472b --- /dev/null +++ b/Minecraft Spider Loader/index.html @@ -0,0 +1,15 @@ + + + + + + + + MineCraft Spider Loader + + +
+
+
+ + diff --git a/Minecraft Spider Loader/style.css b/Minecraft Spider Loader/style.css new file mode 100644 index 00000000..7cdfccd8 --- /dev/null +++ b/Minecraft Spider Loader/style.css @@ -0,0 +1,35 @@ +body{ + background-color: black; +} +.crust { + margin-top: 20%; + display: flex; + justify-content: center; + align-items: center; +} + +.crust .core { + width: calc(170px / 7); + height: calc(70px / 7); + background-color: #acff1d; + color: #acff1d; + box-shadow: 20px 20px 0 0, -20px -20px 0 0, 20px -20px 0 0, -20px 20px 0 0, + 0 20px 0 0, 20px 0 0 0, -20px 0 0 0, 0 -20px 0 0; + animation: revolve 4s linear infinite; +} + +@keyframes revolve { + 50% { + box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, + -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, + 0px -10px 0px 0px; + } + 75% { + box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, + -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, + 0px -10px 0px 0px; + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file