animoxjs/dist/Animox.min.css

it is an library that helps in your easing the web development effects and animations

:root {--bgColor: black;}.dark-theme {background-color: #333;color: #fff;}.mf{background-color: var(--bgColor);width: 18px;height: 18px;border-radius: 50%;position: fixed;pointer-events: none;top: 50%;left: 50%;z-index: 99999;mix-blend-mode: difference;transform: translate(-50%,-50%);}.mf2 {pointer-events: none;transform: translate(-50%, -50%);position: fixed;top: -10%;left: -10%;width: 15px;height: 15px;border-radius: 50%;z-index: 99999;mix-blend-mode: exclusion;background-color: var(--bgColor);}#behindmouse {background-color: white;z-index: 9999;}.c{width: 30px;height: 30px;border: 2px solid hsla(0, 85%, 3%, 0.5);}.inner-circle{width: 8px;height: 8px;background-color: #000;}.c,.inner-circle{position: fixed;top: 0;left: 0;transform: translate(-50%,-50%);border-radius:50%;z-index: 1;}.c2{width: 24px;height: 24px;border-radius: 24px;position: absolute;top: 0;pointer-events: none;left: 0;}body #cid {background-color: #000;color: #fff;font-size: 20px;line-height: 110%;display: flex;align-items: center;justify-content: center;text-align: center;text-transform: uppercase;z-index: 100000;}body #cid, body .cc3 {position: absolute;width: 200px;height: 200px;background-color: #fff;border: 2px solid #000;border-radius: 100%;}.c4 {position: absolute;aspect-ratio: 1;height: 300px;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);background: linear-gradient(to right, #1395d1, #0fc58f);filter: blur(200px);}body .c5 {position: fixed;height: 35px;width: 35px;border: 1px solid #000;border-radius: 100%;top: -20px;pointer-events: none;left: -20px;}body .Mbtn {position: relative;width: 200px;padding: 15px 20px;background-color: #333;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;overflow: hidden;text-transform: uppercase;font-weight: 600;cursor: pointer;letter-spacing: 0.1em;border-radius: 25px;color: #fff;transition: all 0.3s ease;text-decoration: none;}body .Mbtn:hover span {color: white;}body .Mbtn:hover::before {width: 120px;height: 120px;}body .Mbtn::before{background-color: var(--clr);content: "";position: absolute;transition: 1s;top: var(--y);left: var(--x);transform: translate(-50%, -50%);border-radius: 50%;width: 0px;height: 0px;transition: left 0s, top 0s;}body .Mbtn span {position: relative;pointer-events: none;color: rgba(255, 255, 255, 0.25);transition: 0.5s;}body .sticky{width: 100%;height: 30px;padding: 15px 10px;background-color: transparent;position: fixed;color: #000;top: 0;left: 0;margin-bottom: 2%;}.stt {display: none;position: fixed;bottom: 20px;right: 20px;background-color: #333;color: #fff;padding: 10px 15px;border: none;cursor: pointer;border-radius: 10px;text-transform: uppercase;text-align: center;outline: none;}.stt2 {display: none;position: fixed;bottom: 20px;right: 20px;background-color: #333;color: #fff;padding: 14px;border: none;cursor: pointer;border-radius: 50%;text-align: center;outline: none;}.pbc {position: fixed;top: 0;left: 0;width: 100%;height: 5px;background-color: #ddd;z-index: 1000;}.pb {height: 100%;background-color: #007bff;width: 0%;}.btnEffect1 {width: 90px;height: 45px;display: flex;align-items: center;position: relative;justify-content: center;border-radius: 25px;cursor: pointer;overflow: hidden;border: 1px solid rgb(161, 161, 161);}.btnEffect1::after {content: "";left: 0;width: 100%;height: 100%;border-radius: 50%;transition: all 0.3s ease;background-color: #110600;position: absolute;bottom: -100%;}.btnEffect1:hover::after {bottom: 0;border-radius: 0;}.btnEffect1:hover span {color: #fff;z-index: 99;}.btnEffect1 span {font-size: 1rem;font-weight: 580;}body .hero_media {position: fixed;-o-object-fit: contain;object-fit: contain;z-index: 999;pointer-events: none;transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);transform: scale(0.5);}.ECircle{background-color: var(--bgColor);width: 45px;height: 45px;border-radius: 50%;position: fixed;pointer-events: none;top: 50%;left: 50%;transition: all 0.20s;z-index: 9999999;mix-blend-mode: difference;transform: translate(-50%,-50%);}.ls {width: 100%;height: 300px;overflow: hidden;}.lc {display: flex;animation: scrollLogos linear infinite;}.lc img {width: auto;height: 100%;object-fit: contain;margin-right: 20px;}@keyframes scrollLogos {0% {transform: translateX(0);}100% {transform: translateX(calc(-100% - 20px));}}.q-scroller {width: 100%;height: 300px;overflow: hidden;}.qc {display: flex;animation: scrollQuotes linear infinite;}.quote {flex-shrink: 0;font-size: 2.6rem;margin-right: 20px;}@keyframes scrollQuotes {0%{transform: translateX(0);}100%{transform: translateX(calc(-100% - 20px));}}.textEffects .char {font-size: 25px;font-family: sans-serif;text-transform: uppercase;color: #000;cursor: pointer;opacity: 0;}* body .rolling-text {display: inline-block;font-family: "gilroy";font-size: 100px;line-height: 100px;height: 100px;text-decoration: none;overflow: hidden;cursor: pointer;text-transform: uppercase;color: #fff;}* body .rolling-text .block:last-child {color: #c93d4b;}* body .rolling-text .letter {display: inline-block;transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);text-transform: uppercase;}* body .rolling-text .letter:nth-child(1) {transition-delay: 0s;}
* body .rolling-text .letter:nth-child(2) {transition-delay: 0.015s;}* body .rolling-text .letter:nth-child(3) {transition-delay: 0.02s;}* body .rolling-text .letter:nth-child(4) {transition-delay: 0.05s;}* body .rolling-text .letter:nth-child(5) {transition-delay: 0.06s;}* body .rolling-text .letter:nth-child(6) {transition-delay: 0.075s;}* body .rolling-text .letter:nth-child(7) {transition-delay: 0.09s;}* body .rolling-text .letter:nth-child(8) {transition-delay: 0.105s;}* body .rolling-text .letter:nth-child(9) {transition-delay: 0.12s;}* body .rolling-text:hover .letter, * body .rolling-text.play .letter {transform: translateY(-100%);}.magic {background: linear-gradient(to right, rgb(127, 31, 142), rgb(103, 58, 183), rgb(244, 143, 177), rgb(127, 31, 142));-webkit-text-fill-color: transparent;white-space: nowrap;background-size: 200%;animation: background-pan 3s linear infinite;font-weight: 600;-webkit-background-clip: text;}@keyframes background-pan {from {background-position: 0% center;}to {background-position: -200% center;}}.JText{font-size: 1.6vw;text-transform: uppercase;font-weight: 600;font-family: sans-serif;cursor: pointer;}body .txt-line {overflow: hidden;margin-top: 20px;margin-bottom: 0px;}body .txt-line p {font-size: 30px;overflow: hidden;font-weight: 500;}body .TE5 {font-size: 130px;margin-left: 5%;font-family: serif;}body .TE5 p {background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(37, 37, 37) 50%);color: transparent;background-size: 200% 100%;background-position-x: 100%;background-clip: text;font-size: 4vw;-webkit-background-clip: text;margin-left: 50px;}.TE6 {text-transform: uppercase;font-family: Verdana, Geneva, Tahoma, sans-serif;color: #ccc;font-size: 2vw;cursor: pointer;position: relative;white-space: nowrap;}.TE6:hover:before {width: 100%;font-size: 100%;transition: all 1.3s;}.TE6:before {content: attr(data-text);position: absolute;top: 0;left: 0;flex-wrap: nowrap;color: #262626;width: 0%;overflow: hidden;transition: 1.3s;}body .TE7C {margin: 0;padding: 0;display: inline-block;}body .TE7C .TE7 {color: #000;font-family: sans-serif;font-size: 2vw;font-weight: 600;letter-spacing: 3px;transition: all 0.3s ease;}body .TE7C:hover .TE7 {animation: animate 2s linear infinite;cursor: pointer;}@keyframes animate {0% {transform: rotate(0deg) translateY(0%);opacity: 1;filter: blur(1px);}100% {transform: rotate(45deg) translateY(-50%);opacity: 0;filter: blur(20px);}}.btnE1 {border: 1px solid #3498db;background-color: none;padding: 10px 20px;width: 120px;font-size: 23px;text-transform: capitalize;font-family: sans-serif;overflow: hidden;z-index: 9;cursor: pointer;position: relative;}.btnE1::before {width: 100%;content: "";z-index: -1;position: absolute;left: 0;transition: 0.8s;background-color: #3498db;height: 0;}.btnM1{color: #3498db;}.btnM1:hover{color: #fff;}.btnM1:hover::before{height: 180%;}.btnM1::before{top: 0;border-radius: 0 0 50% 50%;}.btnE5 {width: 100px;height: 30px;display: flex;align-items: center;justify-content: center;color: #000;cursor: pointer;background-color: none;outline: none;position: relative;border: none;}.btnE5::after {content: "";width: 100%;bottom: 0;left: 0;height: 0.175rem;background-color: crimson;position: absolute;}.btn-center:hover::after{cursor: pointer;transform: scale(1, 1);}.btn-center::after {transform: scale(0, 1);cursor: pointer;transition: transform 0.3s ease;}.btn-left:hover::after {cursor: pointer;transform: scale(1, 1);}.btn-left::after {transform: scale(0, 1);transform-origin: 0% 100%;cursor: pointer;transition: transform 0.3s ease;}.btn-bottom:hover::after {cursor: pointer;transform: scale(1, 1);}.btn-bottom::after {transform: scale(1, 0);cursor: pointer;transition: transform 0.3s ease;}.btn-right:hover::after {cursor: pointer;transform: scale(1, 1);}.btn-right::after {transform: scale(0, 1);transform-origin: 100% 0%;cursor: pointer;transition: transform 0.3s ease;}.slider-container {width: 60%;height: 500px;overflow: hidden;position: relative;}.slider {width: 100%;height: 100%;display: flex;object-fit: cover;transition: transform 0.5s ease;}.slide {flex: 0 0 100%;max-width: 100%;height: 100%;object-fit: cover;background-size: cover;background-position: center;}#prevBtn, #nextBtn {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;background-color: rgba(20, 20, 20, 0.5);color: white;border-radius: 50%;text-align: center;outline: none;border: none;font-size: 1.2vw;line-height: 50px;cursor: pointer;z-index: 1;}#nextBtn{right: 0;}.arrow.left {left: 0;}.arrow.right {right: 0;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}